CSS 如何巧用“结构树”实现“继承”和“层叠”？

前言：CSS 结构树与选择器的关系

CSS 是层叠样式表（Cascading Style Sheets）的缩写，主要用于为 HTML 元素添加样式和美化网页。CSS 与 HTML 互相配合，共同构成了现代网页设计的核心基础。

上一篇《（02）CSS 选择器详解 | CSS》文章中我们曾提到 CSS 中有一个“结构树”的概念，它是 CSS 选择器的基础，理解了结构树就理解了选择器。

什么是结构树？

结构树是 CSS 中用来 HTML 元素之间的关系和层级结构的一种模型。结构树的根节点是 HTML 元素，子节点是 HTML 元素包含的其他 HTML 元素，如此递归下去，直到最后一个子节点。

结构树能够帮助我们理解 CSS 选择器是如何工作的。例如，如果我们想对所有段落（<p>）元素应用某种样式，那么我们可以使用 p 选择器，因为结构树告诉我们，所有段落元素都是 HTML 元素的子节点。

选择器的原理

CSS选择器是一个用来匹配 HTML 元素的模式，它可以根据各种不同的标准对 HTML 元素进行匹配，例如元素的名称、ID、类名、属性值等等。

选择器可以单独使用，也可以组合使用。例如，我们可以使用 p.myClass 选择器来匹配所有具有 myClass 类的段落元素。

选择器的作用

选择器的作用是将 HTML 元素与 CSS 规则相关联，以便 CSS 规则能够应用到 HTML 元素上。例如，我们可以使用 p {color: red;} 规则来将红色应用到所有段落元素。

CSS 的“继承”与“层叠”

继承和层叠是 CSS 中的两个重要概念。

继承

继承是指子元素从父元素那里继承样式。例如，如果一个段落元素的父元素是一个具有 color: red; 样式的 <div> 元素，那么该段落元素也将继承红色。

层叠

层叠是指当多个样式规则应用到同一个元素时，浏览器会根据一定的规则来确定最终应用的样式。

层叠的优先级由以下因素决定：

• 特异性： 具有更具体选择器的样式规则具有更高的优先级。例如，p.myClass 选择器比 p 选择器更具体，因此具有更高的优先级。
• 位置： 位于样式表中更后面的样式规则具有更高的优先级。
• 重要性： 具有 !important 标记的样式规则具有最高的优先级。

结构树对于继承和层叠的重要性

结构树对于继承和层叠来说非常重要，因为它是 CSS 选择器和样式规则应用的基础。

没有结构树，CSS 选择器就无法找到要应用样式的元素，CSS 样式规则也就无法应用到这些元素上。

因此，理解结构树对于理解 CSS 的继承和层叠至关重要。

总结

CSS 中的结构树是 CSS 选择器和样式规则应用的基础。继承和层叠是 CSS 中的两个重要概念，它们都与结构树密切相关。

理解结构树对于理解 CSS 的继承和层叠至关重要。