CSS 基础：层叠、优先级与继承

在学习 CSS 的过程中，层叠、优先级和继承是三个非常重要的概念。它们决定了 CSS 样式如何被应用到 HTML 元素上，以及如何处理样式冲突。本文将通过通俗易懂的语言和实际示例，帮助你理解这些概念。

---

一、层叠（Cascade）

层叠是 CSS 的核心概念之一。简单来说，层叠指的是 CSS 样式规则的顺序会影响最终的样式效果。当多个规则应用于同一个元素时，最后定义的规则会覆盖前面的规则。

示例：层叠的顺序

<h1>这是我的标题。</h1>

h1 {color: red;
}
h1 {color: blue;
}

在这个示例中，<h1> 元素的文本颜色会显示为蓝色，因为后面的规则覆盖了前面的规则。

---

二、优先级（Specificity）

当多个规则应用于同一个元素时，优先级决定了哪个规则会被应用。优先级由选择器的“具体程度”决定，具体程度越高，优先级就越高。

优先级规则

1. ID 选择器 > 类选择器 > 元素选择器
2. 组合选择器（如 div p）的优先级高于单个选择器（如 p）
3. 内联样式（style 属性）的优先级最高

示例：优先级的比较

<h1 class="main-heading">这是我的标题。</h1>

.main-heading {color: red;
}h1 {color: blue;
}

在这个示例中，.main-heading 是类选择器，优先级高于元素选择器 h1，所以文本颜色会显示为红色。

---

三、继承（Inheritance）

继承是指某些 CSS 属性会从父元素传递到子元素。继承可以减少重复代码，但需要注意并不是所有属性都会被继承。

哪些属性会被继承？

• 会被继承的属性：color、font-family、font-size 等
• 不会被继承的属性：width、height、margin、padding 等

示例：继承的效果

<ul><li>项目 1</li><li>项目 2<ul><li>2.1</li><li>2.2</li></ul></li>
</ul>

ul {color: blue;font-size: 20px;
}

在这个示例中，所有 <li> 元素的文本颜色和字体大小都会继承自父元素 <ul>。

---

四、控制继承

CSS 提供了一些特殊值来控制继承行为：

• inherit：显式地继承父元素的属性值
• initial：将属性值设置为初始值
• unset：如果属性可以继承，则使用父元素的值；否则使用初始值
• revert：将属性值重置为浏览器默认值

示例：控制继承

<ul><li>默认颜色</li><li class="inherit">继承颜色</li><li class="initial">初始颜色</li><li class="unset">取消设置</li>
</ul>

ul {color: green;
}.inherit {color: inherit;
}.initial {color: initial;
}.unset {color: unset;
}

在这个示例中：

• .inherit 会继承父元素的绿色
• .initial 会使用初始颜色（黑色）
• .unset 会继承父元素的绿色

---

五、优先级的计算

优先级由三个部分组成，按重要性排序如下：

1. ID 选择器：每个 ID 选择器得 1 分
2. 类选择器：每个类选择器、属性选择器或伪类得 1 分
3. 元素选择器：每个元素选择器或伪元素得 1 分

示例：优先级的计算

<div class="container" id="outer"><div class="container" id="inner"><ul><li class="nav"><a href="#">一</a></li><li class="nav"><a href="#">二</a></li></ul></div>
</div>

/* 优先级：1-0-1 */
#outer a {background-color: red;
}/* 优先级：2-0-1 */
#outer #inner a {background-color: blue;
}

在这个示例中，#outer #inner a 的优先级高于 #outer a，因为前者有两个 ID 选择器。

---

六、内联样式与 !important

• 内联样式：直接在 HTML 元素上定义的样式，优先级最高。
• !important：可以强制覆盖所有样式，但应谨慎使用。

示例：!important 的使用

<p class="better">这是个段落。</p>
<p class="better" id="winning">一个选择器掌管一切！</p>

#winning {background-color: red;border: 1px solid black;
}.better {background-color: gray;border: none !important;
}

在这个示例中，.better 的 border: none !important 会覆盖 #winning 的 border: 1px solid black。

---

七、总结

• 层叠：样式规则的顺序会影响最终效果。
• 优先级：选择器的“具体程度”决定了优先级。
• 继承：某些属性会从父元素传递到子元素。

理解这些概念可以帮助你更好地控制 CSS 样式，避免样式冲突和意外效果。