在CSS中，有三大核心特性：层叠性（Cascading）、继承性（Inheritance）和特异性（Specificity）。这三大特性是CSS工作原理的基础，理解它们对于掌握CSS的使用至关重要。
1. 层叠性（Cascading）
定义：
层叠性是指当多个CSS规则应用于同一个HTML元素时，CSS引擎会根据规则的优先级来决定最终应用的样式。这种“层叠”的过程确保了样式规则的冲突可以被合理解决。
层叠的规则：
-
来源优先级：
- 内联样式 > 内部样式表 > 外部样式表 > 浏览器默认样式。
-
特异性（Specificity）：
- 特异性决定了在冲突时哪个规则会被应用。特异性越高，规则的优先级越高。
- 特异性计算：
!important> ID选择器 > 类选择器/属性选择器/伪类 > 元素选择器/伪元素 > 通用选择器。
-
规则的顺序：
- 如果多个规则的特异性相同，则后定义的规则会覆盖先定义的规则（即“后写覆盖先写”）。
示例：
/* 外部样式表 */
p {color: blue;
}/* 内部样式表 */
p {color: green;
}/* 内联样式 */
<p style="color: red;">这是一段文本</p>
结果：
- 文本颜色为红色，因为内联样式的优先级最高。
2. 继承性（Inheritance）
定义：
继承性是指某些CSS属性可以从父元素传递给子元素。这意味着子元素会自动继承父元素的某些样式，而无需显式声明。
可继承的属性：
- 文本相关属性（如
font-size、font-family、color等）。 - 行高（
line-height）。 - 文本对齐方式（
text-align）。 - 某些边距和内边距属性（如
margin、padding）。
不可继承的属性：
- 大部分布局属性（如
width、height、margin、padding等）。 - 背景相关属性（如
background-color）。 - 边框相关属性（如
border）。
示例：
<div style="color: blue; font-size: 20px;"><p>这是一段文本</p>
</div>
结果：
<p>元素会继承<div>的color和font-size属性，因此文本颜色为蓝色，字体大小为20px。
注意：
虽然某些属性可以继承，但开发者可以通过显式声明覆盖继承的样式。例如：
p {color: red; /* 覆盖继承的蓝色 */
}
3. 特异性（Specificity）
定义：
特异性是指CSS选择器的优先级。当多个规则冲突时，特异性决定了哪个规则会被应用。特异性越高，规则的优先级越高。
特异性的计算：
特异性由四个数字组成：(a, b, c, d)，分别对应：
a：!important声明的数量（如果有!important，则优先级最高）。b：ID选择器的数量。c：类选择器、属性选择器和伪类选择器的数量。d：元素选择器和伪元素选择器的数量。
注意： 特异性是按位比较的，即先比较a，如果相同再比较b，依此类推。
示例：
/* 特异性：(0, 1, 0, 0) */
#main {color: blue;
}/* 特异性：(0, 0, 1, 0) */
.box {color: green;
}/* 特异性：(0, 0, 0, 1) */
p {color: yellow;
}
结果：
- 如果一个元素同时匹配
#main、.box和p，最终颜色为蓝色，因为#main的特异性最高。
特殊情况：
!important声明：优先级最高，可以覆盖其他所有规则。- 内联样式：等同于
!important，优先级很高。
CSS三大特性的总结
-
层叠性（Cascading）：
- 解决样式冲突的规则，包括来源优先级、特异性和规则顺序。
- 确保样式规则可以合理“层叠”。
-
继承性（Inheritance）：
- 某些样式可以从父元素传递给子元素。
- 可继承的属性主要包括文本相关样式。
-
特异性（Specificity）：
- 决定选择器优先级的规则。
- 特异性越高，规则的优先级越高。
实际应用中的重要性
理解这三大特性可以帮助你更好地控制CSS样式的应用，避免意外的样式冲突和难以调试的问题。同时，合理利用这些特性可以提高代码的可维护性和可读性。
