CSS - 6、三大特性
在CSS中，有三大核心特性：层叠性（Cascading）、继承性（Inheritance）和特异性（Specificity）。这三大特性是CSS工作原理的基础，理解它们对于掌握CSS的使用至关重要。
1. 层叠性（Cascading）
定义：
层叠性是指当多个CSS规则应用于同一个HTML元素时，CSS引擎会根据规则的优先级来决定最终应用的样式。这种“层叠”的过程确保了样式规则的冲突可以被合理解决。
层叠的规则：
来源优先级：
内联样式 > 内部样式表 > 外部样式表 > 浏览器默认样式。
特异性（Specificity）：
特异性决定了在冲突时哪个规则会被应用。特异性越高，规则的优先级越高。
特异性计算：!important > ID选择器 > 类选择器/属性选择器/伪类 > 元素选择器/伪元素 > 通用选择器。
规则的顺序：
如果多个规则的特异性相同，则后定义的规则会覆盖先定义的规则（即“后写覆盖先写”）。
示例：
/* 外部样式表 */
p {
color: blue;
}
/* 内部样式表 */
p {
color: green;
}
/* 内联样式 */
这是一段文本
结果：
文本颜色为红色，因为内联样式的优先级最高。
2. 继承性（Inheritance）
定义：
继承性是指某些CSS属性可以从父元素传递给子元素。这意味着子元素会自动继承父元素的某些样式，而无需显式声明。
可继承的属性：
文本相关属性（如font-size、font-family、color等）。
行高（line-height）。
文本对齐方式（text-align）。
某些边距和内边距属性（如margin、padding）。
不可继承的属性：
大部分布局属性（如width、height、margin、padding等）。
背景相关属性（如background-color）。
边框相关属性（如border）。
示例：
这是一段文本
结果：
元素会继承
注意：
虽然某些属性可以继承，但开发者可以通过显式声明覆盖继承的样式。例如：
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样式的应用，避免意外的样式冲突和难以调试的问题。同时，合理利用这些特性可以提高代码的可维护性和可读性。