CSS选择器及其优先级

选择器权重（加权的说法存在些问题，文末会解释）

选择器	举例	选择器权重
继承 或者*(通配符)，子选择器（>) , 相邻选择器（+）	*{}， .father > .child{}，.bro1 + .bro2{}	0,0,0,0
标签/元素选择器，伪元素选择器	span{}， ::before{}	0,0,0,1
类选择器，伪类选择器，属性选择器	.class{}， :hover{}，a[href=“segmentfault.com”]{}	0,0,1,0
ID选择器	#id{}	,1,0,0
行内(间）样式	style=“color: red”	1,0,0,0
！important	p { background: red !important; }	无穷大(Infinity)

优先级注意点

1. 权重是由4组数字组成，值从左到右，左面的最大，一级大于一级，但是不会有进位，级别之间不可超越

2. 计算：把这些值加起来，就是当前元素的权重

   div#app.child[name="appName"] /*权重 = 1 + 100 + 10 +10 = 121*/
   

3. ！important > 行内样式 > ID选择器 > 类选择器 | 属性选择器 |伪类选择器 > 元素（标签）选择器 > 通配符 > 继承 > 浏览器默认属性

4. 等级判断从左到右，如果某一个数值相同，则判断下一位数值

5. 简单记忆法：

   • 通配符和继承权重为0（即在嵌套结构中，不管父元素样式的权重多大，被子元素继承时，他的权重都为0，也就是说子元素定义的样式会覆盖继承来的样式）
   • 标签选择器为1
   • 类（伪类）选择器为10
   • ID选择器100
   • 行内样式表为1000
   • ！important无穷大（即不管权重如何以及样式位置的远近，！important都具有最大优先级，加上!importanrt可以覆盖父级的样式）

6. 继承的权重是0，如果该元素没有直接选中（即样式没有携带有文字标签），不管父元素权重多高，子元素得到的权重都是0

   <style>
   .Color{
       color:#f00; /*权重为0 */
   }
   span {
       color:#0f0; /* 权重为1 */
   }
   </style>
   
   <div class="Color">
       <span>颜色</span>
   </div>
   

7. 权重叠加：如果是复合选择器，则会有权重叠加，需要计算权重

例如：div ul li 0,0,0,3

       .nav ul li          0,0,1,2

注意：权重虽然会叠加，但是永远不会有进位。

加权存在错误的说法（个人认为是为了便于理解）

在学习过程中，出现给选择器加权值的说法，即 ID 选择器权值为 100，类选择器权值为 10，标签选择器权值为 1，当一个选择器由多个 ID 选择器、类选择器或标签选择器组成时，则将所有权值相加，然后再比较权值。这种说法其实是有问题的。比如一个由 11 个类选择器组成的选择器和一个由 1 个 ID 选择器组成的选择器指向同一个标签，按理说 110 > 100，应该应用前者的样式，然而事实是应用后者的样式。错误的原因是：权重的进制是并不是十进制，CSS 权重进制在 IE6 为 256，后来扩大到了 65536，现代浏览器则采用更大的数量。。还是拿刚刚的例子说明。11 个类选择器组成的选择器的总权值为 110，但因为 11 个均为类选择器，所以其实总权值最多不能超过 100， 你可以理解为 99.99，所以最终应用后者样式