20180224-css选择器的权重

css选择器的权重

1第一种情况：
样式表中只有单一样式：
即 内联>id>class>元素
#id{} .class{} p{}

2第二种情况：
组合选择器
从左往右逐个比较，按a,b,c,d 进行比较 越大权重越高。
权限值生成方法
按权重由高到低书写,不按选择器的顺序写
eg:

/*bbc  */
#dii .dd #ip{
  color: palevioletred;
}

/*bcc  */
#dii .dd .cp{
  color: paleturquoise
}

/*bbb  */
#dii>#idd>#ip{
  color: yellowgreen;
} 

这个里面权重顺序 bbb>bbc>bcc
3 单个和组合混淆
eg:

/*bcc  */
#dii .dd .cp{
  color: paleturquoise
}

/*bbc  */
#dii .dd #ip{
  color: palevioletred;
}

/*bbb  */
#dii>#idd>#ip{
  color: yellowgreen;
} 
-------------------------------------
单个
/*b  */
#ip{
  color: cyan;
}

权重顺序  bbb>bbc>bcc>b

总结：

 权重值从左往右逐个比较，如第一个位置与另一组的第一个比较，有大小权重关系就不在比较后面的，如相等
继续比较后面的，如果是比较的组合一个有值另一个没值，有值权重更高。