CSS 高级特性的详解，让你成为 CSS 达人！

2023-11-02 07:16:09

深入探讨 CSS 高级特性：复合选择器、层叠性和继承性

复合选择器：精准匹配元素

复合选择器让你可以结合多个选择器来定位特定的元素。就像搭积木一样，你可以将不同的选择器层层堆叠，创建出高度特定的匹配规则。比如，如果你想选择所有具有 header 类和 nav ID 的元素，你可以使用以下复合选择器：

.header#nav

还可以使用复合选择器来指定元素的父子关系。例如，下面的选择器将匹配所有属于 header 类且是 nav 元素子元素的元素：

.header > nav

层叠性：决定谁说了算

当多个样式规则同时应用于一个元素时，层叠性就会发挥作用，决定最终生效的样式规则。有三个原则指导着层叠性：

继承性：保持一致，节省精力

继承性可以让 CSS 规则自动传递给子元素，就像遗传一样。例如，如果你在 body 元素上设置 font-size 属性，那么它的所有子元素都会自动继承该字体大小，除非它们自己定义了不同的值。继承性对于保持网页的整体一致性非常有用，同时还可以节省大量重复设置的精力。

示例：层叠性和继承性在实践中

为了更好地理解层叠性和继承性，让我们举个例子。假设我们有以下 HTML 代码：

<div id="container">
  <p>我是第一个段落</p>
  <div class="inner">
    <p>我是第二个段落</p>
  </div>
</div>

现在，我们使用以下 CSS 规则：

#container {
  font-size: 16px;
}

.inner p {
  font-size: 14px;
}

p {
  color: red;
}

根据层叠性原则：

#container 规则的特异性高于 .inner p 规则，所以 #container 中的 font-size 属性会覆盖 .inner p 中的 font-size 属性，因此 第一个段落 的字体大小为 16px。
p 规则的特异性低于 .inner p 规则，因此 .inner p 中的 color 属性会覆盖 p 中的 color 属性，所以 第二个段落 的颜色为黑色。
然而，第二个段落 仍会继承 #container 中的 font-size 属性，因为继承性原则优先于层叠性原则。