CSS - 6、三大特性

在CSS中，有三大核心特性：层叠性（Cascading）、继承性（Inheritance）和特异性（Specificity）。这三大特性是CSS工作原理的基础，理解它们对于掌握CSS的使用至关重要。

---

1. 层叠性（Cascading）

定义：
层叠性是指当多个CSS规则应用于同一个HTML元素时，CSS引擎会根据规则的优先级来决定最终应用的样式。这种“层叠”的过程确保了样式规则的冲突可以被合理解决。

层叠的规则：

1. 来源优先级：

   • 内联样式 > 内部样式表 > 外部样式表 > 浏览器默认样式。

2. 特异性（Specificity）：

   • 特异性决定了在冲突时哪个规则会被应用。特异性越高，规则的优先级越高。
   • 特异性计算：!important > ID选择器 > 类选择器/属性选择器/伪类 > 元素选择器/伪元素 > 通用选择器。

3. 规则的顺序：

   • 如果多个规则的特异性相同，则后定义的规则会覆盖先定义的规则（即“后写覆盖先写”）。

示例：

/* 外部样式表 */
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)，分别对应：

1. a：!important声明的数量（如果有!important，则优先级最高）。
2. b：ID选择器的数量。
3. c：类选择器、属性选择器和伪类选择器的数量。
4. 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三大特性的总结

1. 层叠性（Cascading）：

   • 解决样式冲突的规则，包括来源优先级、特异性和规则顺序。
   • 确保样式规则可以合理“层叠”。

2. 继承性（Inheritance）：

   • 某些样式可以从父元素传递给子元素。
   • 可继承的属性主要包括文本相关样式。

3. 特异性（Specificity）：

   • 决定选择器优先级的规则。
   • 特异性越高，规则的优先级越高。

---

实际应用中的重要性

理解这三大特性可以帮助你更好地控制CSS样式的应用，避免意外的样式冲突和难以调试的问题。同时，合理利用这些特性可以提高代码的可维护性和可读性。