这一次，彻底搞懂CSS选择器

一、CSS选择器的优先级

1. 第一优先级：!important
2. 内联样式/行内样式：权重1000
3. ID选择器：权重为0100
4. 类、伪类、属性选择器：权重为0010
5. 标签、伪元素选择器：权重为0001
6. 通配符、子类选择器和兄弟选择器：权重为0000
7. 继承的样式没有权重。

二、权重是十进制吗？

上面我们提到的权重不是十进制而是256进制，!important的权重是正无穷，但是这里的无穷是可以比较的，也就是说无穷+1比无穷要大。

三、权重之间是如何进行比较的？

1. 权重从左向右进行比较。1000 > 0100.
2. 权重相同时后面的样式会覆盖掉前面的样式。
3. 通配符、子类选择器和兄弟选择器即使权重为0000，但是依然比继承的样式优先级高。

四、权重计算的实例

1. 标签选择器(0001)

p {
    
    
  color: aqua;
}

2. 类选择器（0010）

.page {
    
    
  color: red
}

3. 类选择器下面的标签选择器(0011)

.page p {
    
    
  color: aqua;
}

4. 类选择器下的属性选择器(0020)

.page p[class="a"] {
    
    
  color: aqua;
}

5. 相同权重的后面会覆盖前面的

.page p[class="a"] {
    
    
  color: aqua;
}
.page p[class="a"] {
    
    
  color: red;
}

页面显示的是红色的，因为二者权重相同，后面的会覆盖前面的。

6. important会提高优先级

.page p[class="a"] {
    
    
  color: aqua !important;
}
.page p[class="a"] {
    
    
  color: red ;
}

页面显示的是aqua颜色，因为!important提高了样式的优先级。

总结

关于CSS选择器的优先级和权重无论是在面试中还是在工作中都是重中之重，都值得我们花费时间好好学习和记忆，最重要的是知道优先级顺序，知道权重是如何计算的，只有这样才能在遇到实际CSS问题的时候，才能使用相关知识克服bug。