CSS-4：CSS的三大特性 - 详解
一.特性一：层叠性
相同的选择器给设置相同的样式，如都设置了color或者font-size的样式，此时一个样式会覆盖（层叠）掉另外一个冲突的样式，因为不可能两个样式同时起作用
层叠性主要解决样式冲突的问题
层叠性的特征：
- 样式冲突，遵循就近原则，哪个样式离结构近，就执行哪个样式
- 如果样式不会冲突，那么就不会层叠（覆盖）
CSS特性之层叠性 长江后浪推前浪，前浪死在沙滩上。看完这段代码，你猜猜看<body>标签中的<div>标签里面的文字的颜色是什么？
答案是：粉色
可以按下F12键打开开发者模式，查看Element中文字的详细情况
可见确实是根据“就近原则”来执行层叠性这个特性的
font-size=12px;没有和第二个div选择器中的样式冲突，就不会被层叠掉
因此页面的字体大小是12像素，比之前变小了
二.特性二：继承性
继承性就是在CSS中子标签会继承父标签的一些样式，但并不是所有的样式都会继承，如color，font-size，line- ， text-这些和文字相关的样式会被继承
恰当地使用继承性可以简化CSS的代码，降低CSS样式的复杂性
CSS继承性 龙生龙，凤生凤，老鼠的儿子会打洞。
效果：可见，虽然没有给<p>标签设置样式，但是由于它在<div>标签内部，是<div>标签的子节点，所以会继承<div>标签的样式
打开调试工具，可以看到继承性的具体信息：
三.行高的继承
font-size: 12px/24px;12px表示字体的大小，而斜杠后面的24px表示行高的大小，为24像素
但是行高的大小也可以不跟单位，表示的是行高大小是当前元素的字体大小的多少倍
行高的继承 现在是北京时间17点50分
2025年11月17日
粉红色的回忆
打开开发者工具，（注意：font-size样式不支持设置行高和字体族信息，要将它改为font复合属性）
修改正确后，可以发现确实<p>中的字体的字体大小继承了当前行高*1.5这个属性
同理，可以查看<div>标签外部的<p>标签中文字的字体大小：
四.特性三：优先级
当同一个元素指定多个选择器，就会有优先级的产生
规则：
- 选择器相同，执行层叠性
- 选择器不同，则更具选择器权重执行
| 选择器 | 权重 |
| 继承或* | 0,0,0,0 |
| 元素选择器 | 0,0,0,1 |
| 类选择器、伪类选择器 | 0,0,1,0 |
| ID选择器 | 0,1,0,0 |
| 行内样式：style="xxx" | 1,0,0,0 |
| !important | 无效大 |
CSS优先级 你笑起来真好看效果：
如设置：
color:pink!important;则最优先设置pink颜色（注意：!important单独写才起着权重最大的作用，如果它写在其他选择器内部，那么它就是属于这个选择器的权重，遇到比这个选择器权重大的选择器，那么CSS就会执行那个权重更大的选择器中设置的属性）
五.优先级注意的事项
六.权重的叠加
当遇到复合选择器时，该复合选择器的权重会进行叠加
权重虽然会叠加，但永远不会进位