一、CSS选择器的优先级
- 第一优先级:!important
- 内联样式/行内样式:权重1000
- ID选择器:权重为0100
- 类、伪类、属性选择器:权重为0010
- 标签、伪元素选择器:权重为0001
- 通配符、子类选择器和兄弟选择器:权重为0000
- 继承的样式没有权重。
二、权重是十进制吗?
上面我们提到的权重不是十进制而是256进制,!important的权重是正无穷,但是这里的无穷是可以比较的,也就是说无穷+1比无穷要大。
三、权重之间是如何进行比较的?
- 权重从左向右进行比较。1000 > 0100.
- 权重相同时后面的样式会覆盖掉前面的样式。
- 通配符、子类选择器和兄弟选择器即使权重为0000,但是依然比继承的样式优先级高。
四、权重计算的实例
- 标签选择器(0001)
p {
color: aqua;
}
- 类选择器(0010)
.page {
color: red
}
- 类选择器下面的标签选择器(0011)
.page p {
color: aqua;
}
- 类选择器下的属性选择器(0020)
.page p[class="a"] {
color: aqua;
}
- 相同权重的后面会覆盖前面的
.page p[class="a"] {
color: aqua;
}
.page p[class="a"] {
color: red;
}
页面显示的是红色的,因为二者权重相同,后面的会覆盖前面的。
- important会提高优先级
.page p[class="a"] {
color: aqua !important;
}
.page p[class="a"] {
color: red ;
}
页面显示的是aqua颜色,因为!important提高了样式的优先级。
总结
关于CSS选择器的优先级和权重无论是在面试中还是在工作中都是重中之重,都值得我们花费时间好好学习和记忆,最重要的是知道优先级顺序,知道权重是如何计算的,只有这样才能在遇到实际CSS问题的时候,才能使用相关知识克服bug。