CSS的三大特性
以下是润色优化后的CSS三大特性笔记：
CSS的三大特性
CSS有三个核心特性：层叠性、继承性、优先级，它们是CSS样式系统的基石。
层叠性
当相同选择器设置相同样式属性时，后定义的样式会**覆盖（层叠）**先定义的样式。层叠性主要解决样式冲突问题。
层叠原则
- 样式冲突：遵循就近原则（后定义的生效）
- 样式不冲突：各自生效，不会覆盖
代码示例
html
<head>
<style>
div {
/* color=red会被覆盖 */
color: red;
/* font-size会保留 */
font-size: 12px;
}
div {
color: pink; /* 最终生效的颜色 */
}
</style>
</head>
<body>
<div>长江后浪推前浪，前浪死在沙滩上</div>
</body>提示
层叠性不仅适用于相同选择器，也适用于不同选择器之间的样式冲突
继承性
子元素会继承父元素的某些样式属性，主要涉及文本相关样式。
可继承属性
- 文字相关：
text-、font-、line-开头的属性 - 颜色属性：
color - 列表属性：
list-style
代码示例
html
<head>
<style>
div {
color: pink;
font-size: 14px;
line-height: 1.5;
}
</style>
</head>
<body>
<div>
<p>这段文字会继承div的粉色和1.5倍行高</p>
</div>
</body>行高继承
css
body {
font: 12px/1.5 'Microsoft YaHei';
}特点：
- 子元素行高 = 子元素字体大小 × 继承的倍数
- 无单位行高更具灵活性
- 是响应式设计的理想选择
html
<style>
body {
font: 12px/1.5 'Microsoft YaHei';
}
.child {
font-size: 16px; /* 实际行高=16×1.5=24px */
}
</style>警告
width、height、margin、padding等盒模型属性不可继承a标签默认不继承颜色（浏览器有默认样式）
优先级
当多个选择器作用于同一元素时，通过权重决定最终样式。
权重等级表
| 选择器类型| 权重表示| 示例| |--|-|| | !important| ∞| color: red !important; | | 行内样式| 1,0,0,0| style="color:blue" | | ID选择器| 0,1,0,0| #header| | 类/伪类/属性选择器 | 0,0,1,0| .active| | 元素/伪元素选择器| 0,0,0,1| div| | 通配符/继承| 0,0,0,0| *|
权重计算规则
- 从左到右逐级比较
- 权重相同时后定义的生效
- 继承的权重为0
html
<style>
#parent { color: red; }/* 0,1,0,0 */
p { color: blue; }/* 0,0,0,1 */
</style>
<div id="parent">
<p>最终显示蓝色（继承权重为0）</p>
</div>权重叠加
复合选择器的权重需要累加计算：
css
ul li/* 0,0,0,1 + 0,0,0,1 = 0,0,0,2 */
.nav li/* 0,0,1,0 + 0,0,0,1 = 0,0,1,1 */
a:hover/* 0,0,0,1 + 0,0,1,0 = 0,0,1,1 */危险
- 权重计算不进位（0,0,15,0 < 0,1,0,0）
- 避免滥用!important（难以覆盖）