三大特性
层叠性
相同标签名, 标签内部标签
- 样式冲突, 遵循就近原则
- 样式不冲突, 不会层叠
继承性
子标签会继承父标签的某些样式
- 恰当使用继承可以简化代码, 降低CSS样式的复杂性
- 子元素可以继承父元素的样式(text-, font-, line-这些元素开头的 可以继承, 以及color属性
行高可以跟单位也可以不跟单位
优先级
党同一个元素指定多个选择器, 就会有优先级的产生
- 选择器相同, 则执行层叠性
- 选择器不同, 则根据选择器权重执行
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fEySztrO-1611562205155)(index_files/43fd6bbd-f187-422e-8799-75baf53e6bfb.jpg)]](https://img-blog.csdnimg.cn/20210125162045369.png)
**权重: **
id > 类 > 标签
- 继承的权重是0
- 类10
- 标签(元素)1
- 复合选择器会有权重叠加的问题 - 权重虽然有叠加, 但是永远不会有进位
<!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>
.nav li {
color: red;
}
.pink {
/* 没有生效!!! */
color: pink;
font-size: 700;
}
</style>
</head>
<body>
<ul class="nav">
<li class="pink">22222</li>
<li>111122</li>
<li>111122</li>
<li>111122</li>
</ul>
</body>
</html>
没有变成粉色, 没有生效, 权重不够!