第十四节：层叠
2020-04-10 本文已影响0人
EndPein
层叠
声明冲突：同一个样式，多次应用到同一个元素
比如现在实现，鼠标移动在一个链接的时候实现增加背景颜色，变换字体颜色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
a {
color: #f40;
width: 20px;
padding: 0 5px;
text-decoration: none;
font-style: italic;
}
a:hover{
color: #fff;
background-color: #f40;
}
</style>
</head>
<body>
<a href="">Lorem.</a>
<a href="">Cupiditate?</a>
<a href="">Sequi!</a>
<a href="">Sint?</a>
<a href="">Corporis?</a>
<a href="">Iste.</a>
<a href="">Laborum!</a>
<a href="">Excepturi?</a>
<a href="">Cum?</a>
<a href="">Beatae?</a>
</body>
</html>
层叠：解决声明冲突的过程，浏览器自动处理（权重计算）
1、比较重要性
重要性从高到低：
1） 作者样式表中的 !important样式
例如上面的代码中如果增加后
a {
color: #f40 !important;
width: 20px;
padding: 0 5px;
text-decoration: none;
font-style: italic;
}
a:hover{
color: #fff;
background-color: #f40;
}
页面样式也会改变
2）作者样式表中的普通样式
3）浏览器默认样式表
2、比较特殊性
看选择器
总体规则：选择器选中的范围越窄，越特殊
具体规则：通过选择器，计算出一个4位数（ x x x x ）
1、千位：如果是内联样式，则为1，否则为0
2、百位：等于选择器中所有id选择器的属性
3、十位：等于选择器中所有类选择器、属性选择器、伪类选择器的数量
4、个位：等于选择器中所有元素选择器、伪元素选择器的数量
个位数进制是256位进1的，所以可以忽略累加进制问题
3、比较源次序
代码书写靠后的胜出
应用
1、重置样式表
书写一些作者样式，覆盖浏览器的默认样式
重置样式表->浏览器默认样式
一些常见的重置样式表：normalize.css、reset.css、meyer.css
2、爱恨法则
link > visited > hover > active
