深入CSS优先级
![](https://imagecloud.laixiazheteng.cn/specificityimg.png)
<p class="myClass" id="myDiv">
div#myDiv { color: purple; } 1-0-0
p.myClass { color: red;} 0-1-1
p[id^='my'] {color: blue;} 0-1-1
p:nth-of-type(1n) {color: yellow;} 0-1-1
div#test span { color: green }
span { color: red }
div span { color: blue }
<div id="test">
<span>Text</span>
</div>
div#test span { color: green }
span { color: red !important; /*注意这里*/ }
div span { color: blue }
<div id="test">
<span>Text</span>
</div>
.class3 {color: blue}
.class1 {color: green;}
.class2 {color: red;}
<span class="class1 class2 class3"> 我是红色,class2生效</span>
从上面的例子中可以看到,三个class类型,最后生效的是样式表中定义最后的,而不是class中定义最后的。
3.4 无视DOM树中的距离
body h1 {
color: green;
}
div h1 {
color: red;
}
html h1 {
color: purple;
}
<div>
<h1>Here is a title!</h1>
</div>
在上面的样式中,都是以标签选择器 标签选择器这种后代选择器的形式来定义样式,可以看到最终显示的样式中定义最后的。
3.5 :not()
div.outer p {
color:orange;
}
div:not(.outer) p {
color: lime;
}
<div class="outer">
<p>This is in the outer div.</p>
<div class="inner">
<p>This text is in the inner div.</p>
</div>
</div>
:not 否定伪类在优先级计算中不会被看作是伪类,而是当作普通选择器来处理。
总结
- 样式表的元素选择器选择越精确,则其中的样式优先级越高
- 对于相同类型选择器制定的样式,在样式表文件中,越靠后的优先级越高
- 特殊的!important会覆盖前面所有的声明
参考:
https://developer.mozilla.org/zh-CN/docs/Web/CSS/Specificity
http://www.standardista.com/css3/css-specificity/