层叠(权重计算)
声明冲突:同一个样式,多次应用到同一个元素
层叠:解决声明冲突的过程,浏览器自动处理
1. 比较重要性
重要性从高到低
作者样式表:开发者书写的样式
- 作者样式表中的 !important 样式[不建议,重要性太高了,难以覆盖]
- 作者样式表中的普通样式
- 浏览器默认样式表中的样式
2. 比较特殊性
总体规则:看选择器,选择器选择的范围越窄,越特殊
具体规则:通过选择器,计算出一个四位数(xxxx)
- 千位:如果是内联样式,记1,否则记0
- 百位:等于选择器中所有ID选择器的个数
- 十位:等于选择器中所有类选择器、书写选择器、伪类选择器的数量
- 个位:等于选择器中所有元素选择器、伪元素选择器的数量
逢256进一
3. 比较源次序
代码书写靠后的胜出(爱恨法则)
<style>
a{/* 0001 */
color: indianred;
}
div ul a{/* 0003 */
color: indigo;
}
#mydiv #myul a{/* 0201 */
color: khaki;
}
#mydiv #myul.mylink{/* 0210 */
color: lightblue;
}
#mydiv #myul a:link{/* 0211 */
color: rgb(21, 83, 145);
}
</style>
<body>
<div id="mydiv">
<ul id="myul">
<li id="myli">
<a href="http.//163.com" class="mylink">
163
</a>
</li>
</ul>
</div>
</body>
应用
-
重置样式表
书写一些作者样式,覆盖浏览器的默认样式,再写样式覆盖重置样式表
[先引用重置样式,再引用其他样式]
常见的重置样式表:normalize.css、reset.css、meyer.css -
爱恨法则
link > visited > hover > active