跳到主要内容

CSS 层叠规则

在CSS中，层叠规则（Cascading Rules）决定了当多个样式规则应用于同一个元素时，浏览器如何选择最终的样式。理解层叠规则是掌握CSS的关键，它帮助我们解决样式冲突，并确保网页按预期呈现。

什么是层叠规则？​

CSS的全称是层叠样式表（Cascading Style Sheets），其中的“层叠”指的是多个样式规则可以同时作用于同一个元素，而浏览器会根据一定的规则来决定最终的样式。这些规则包括：

  1. 来源优先级：样式表的来源（如用户样式、作者样式、浏览器默认样式）会影响优先级。
  2. 选择器权重：不同选择器的权重决定了样式的优先级。
  3. 声明顺序：当权重相同时，后定义的样式会覆盖前面的样式。

接下来，我们将逐步讲解这些规则。

1. 来源优先级​

CSS样式的来源可以分为以下几种：

  1. 用户代理样式（浏览器默认样式）：浏览器为HTML元素提供的默认样式。
  2. 用户样式：用户通过浏览器设置的自定义样式。
  3. 作者样式：网页开发者编写的样式。

它们的优先级从低到高依次为：用户代理样式 < 用户样式 < 作者样式。

提示

在实际开发中，我们主要关注作者样式，因为它是我们编写的样式表。

2. 选择器权重​

选择器的权重决定了样式的优先级。权重由选择器的类型决定，具体规则如下：

选择器类型权重值
内联样式（style属性）1000
ID选择器（#id）100
类选择器、属性选择器、伪类（.class, [type="text"], :hover）10
元素选择器、伪元素（div, ::before）1
通配符、子选择器、相邻选择器（*, >, +）0
备注

权重值是一个相对概念，用于比较不同选择器的优先级。权重值越高，优先级越高。

示例：选择器权重比较​

css
/* 权重值：1 */
p {
  color: blue;
}

/* 权重值：10 */
.text {
  color: green;
}

/* 权重值：100 */
#title {
  color: red;
}
html
<p class="text" id="title">Hello, World!</p>

在上面的例子中，#title的权重最高，因此最终文字颜色为红色。

3. 声明顺序​

当多个样式的权重相同时，声明顺序决定了最终的样式。后定义的样式会覆盖前面的样式。

示例：声明顺序的影响​

css
/* 后定义的样式生效 */
p {
  color: blue;
}

p {
  color: green;
}
html
<p>Hello, World!</p>

最终文字颜色为绿色，因为后定义的样式覆盖了前面的样式。

4. 实际应用场景​

场景1：覆盖默认样式​

假设我们想覆盖浏览器默认的链接颜色：

css
/* 权重值：1 */
a {
  color: blue;
}

/* 权重值：10 */
.nav-link {
  color: green;
}
html
<a class="nav-link" href="#">Click Me</a>

由于.nav-link的权重更高，链接颜色为绿色。

场景2：使用!important提升优先级​

在某些情况下，我们可以使用!important强制提升样式的优先级：

css
p {
  color: blue !important;
}

.text {
  color: green;
}
html
<p class="text">Hello, World!</p>

尽管.text的权重更高，但由于!important的存在，文字颜色为蓝色。

警告

过度使用!important会导致样式难以维护，建议仅在必要时使用。

5. 总结​

CSS层叠规则是CSS的核心机制之一，它通过来源优先级、选择器权重和声明顺序来决定最终的样式。掌握这些规则可以帮助我们更好地控制网页的样式，避免冲突。

关键点回顾：​

  • 来源优先级：用户代理样式 < 用户样式 < 作者样式。
  • 选择器权重：内联样式 > ID选择器 > 类选择器 > 元素选择器。
  • 声明顺序：后定义的样式覆盖前面的样式。

6. 附加资源与练习​

练习1：计算选择器权重​

计算以下选择器的权重，并确定最终的样式：

css
#header .nav-link.active {
  color: red;
}

.nav-link.active {
  color: blue;
}

练习2：修复样式冲突​

以下代码中，<p>元素的颜色是什么？如何修改代码使其显示为绿色？

css
p {
  color: blue;
}

.text {
  color: green;
}
html
<p class="text">Hello, World!</p>

推荐阅读：​