样式层叠
声明冲突:同一个样式,多次应用到同一个元素
样式层叠:解决声明冲突的过程,浏览器自动处理(权重计算)
1.比较重要性
重要性从高到低:
作者样式表:开发者书写的样式
1)作者样式表中的!important样式
2) 作者样式表中的普通模式
3)浏览器默认样式表中的样式
!important:最最最高级别重要,不到万不得已不要用
2.比较特殊性
看选择器
总体规则:选择器选中的范围越窄,越特殊
具体规则:通过选择器,计算出一个四位数(XXXX)
1.千位:如果是内联样式,记作1,否则0
2.百位:等于选择器中所有id选择器的数量
3.十位:等于选择器中所有类选择器、属性选择器、伪类选择器的数量
4.各位:等于选择器中所有元素选择器、伪元素选择器的数量
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
a{
/* 0001 */
color: red;
}
div ul a{
/* 0003 */
color: seagreen;
}
#mydiv #myul a{
/* 0201 */
color: steelblue;
}
#mydiv #myul .mylink{
/* 0210 */
color: turquoise;
}
#mydiv #myul a:hover{
/* 0211 */
color:violet
}
#mya{
/* 0100 */
color: rgb(44, 0, 37);
}
</style>
</head>
<body>
<div id="mydiv">
<ul id="myul">
<li id="myli">
<a class="mylink" href="https://ys.mihoyo.com/">原神</a>
<a style="color: blue;" href="https://ys.mihoyo.com/">原神</a>
<!-- 1000 -->
</li>
</ul>
</div>
</body>
</html>
3.比较源次序
当前两点还是冲突时候,比较代码先后顺序,选择最后的执行
应用
1.重置样式表
书写一些作者样式,覆盖浏览器的默认样式
重置样式表 -> 浏览器的默认样式
常见的重置样式表
normalize.css
reset.css
meyer.css
2.爱恨法则
link > visited > hover > active