层叠
声明冲突: 同一个样式,多次应用同一个元素
层叠:觉接声明冲突的过程,浏览器自动处理(权重计算)
1.比较重要性
重要性从高到低
作者样式表: 开发者书写的样式
1) 作者样式表中的!important样式,不到万不得已不要加important
2) 作者样式表中的普通样式
3) 浏览器默认样式表中的样式
2.比较特殊性
看选择器
总体规则: 选择器选中的范围越窄,越特殊
具体规则: 通过选择器,计算出一个4位数 (XXXX)
1.千位:如果是内联样式,记做1,否则为0
2.百位:等于选择器中所有id选择器的数量
3.十位:等于选择器中所有类选择器,属性选择器,伪类选择器的数量
4.个位:等于选择器中所有元素选择器,伪元素选择器的数量
3.比较源次序
代码书写靠后的胜出
应用
1.重置样式表
书写一些作者的样式,覆盖浏览器的默认样式
重置样式表 -> 浏览器的默认样式
网上常见的重置样式表:normalize.css,reset.css,meyer.css
<!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>
<link rel="stylesheet" href="重置样式代码块">
</head>
<style>
h1{
color: red;
font-size: 3em;
}
a{
/* color: red !important; */
text-decoration: none;
font-style: italic;
font-size: 5em;
}
.act{
color: #fff;
background-color: red;
}
</style>
<body>
<h1>标题</h1>
<a href="">Lorem.</a>
<a href="">Cupiditate.</a>
<a href="">Consectetur.</a>
<a href="" class="act">Ipsam!</a>
<a href="">Ipsa!</a>
<a href="">Aspernatur?</a>
<a href="">Dolor!</a>
<a href="">Soluta.</a>
<a href="">Quasi.</a>
<a href="">Sapiente!</a>
</body>
</html>