CSS样式优先级
2018-03-13 本文已影响0人
亭东云漫
1.CSS样式优先级如下：
元素(类型)选择器(如,h1) < 伪元素(如,::before) < 类选择器(如,.example) < 属性选择器(如：[type="radio"]) < 伪类(如,:hover) < ID 选择器(如,#example) < 内联样式(如,style="")
伪元素与伪类区别：有没有创建一个文档树之外的元素。详见：http://www.alloyteam.com/2016/05/summary-of-pseudo-classes-and-pseudo-elements/
2.其他：
a.通配选择符（universal selector）(*), 关系选择符（combinators） (+, >, ~, ' ') 和 否定伪类（negation pseudo-class）(:not()) 对优先级没有影响
b.!important 规则:此声明将覆盖任何其他声明,如果都有!important将根据选择符优先级比较。
3.注意：
1.无视DOM树中的距离，相同选择器从上而下，越往下优先级越高
body h1 {
color: green;
}
html h1 {
color: purple;
}
<html>
<body>
<h1>题目为紫色</h1>
</body>
</html>
2.直接给目标元素添加样式和目标元素继承样式对比
#parent {
color: green;
}
h1 {
color: purple;
}
<html>
<body id="parent">
<h1>题目为紫色</h1>
</body>
</html>
3.对同一个目标元素使用多个类选择器，部分排在后面的优先
.green-text{
color: green;
}
.purple-text {
color: purple;
}
<html>
<body>
<h1 class="green-text purple-text">题目为紫色</h1>
</body>
</html>
