CSS选择器优先级：层叠与继承的奥妙

在CSS世界中，选择器优先级是一个重要的概念，它决定了当多个样式规则应用于同一元素时，哪一个样式规则生效。掌握选择器优先级，可以帮助您创建更简洁、更高效的样式表，并避免样式冲突。

权重与层叠

CSS选择器优先级首先考虑的是选择器的权重 。权重是一个数字，它代表选择器的优先级。选择器的权重越高，它的优先级就越高。权重由选择器中使用的不同类型的选择器和组合器计算得出。

权重的计算规则如下：

• 元素类型选择器（如p、div、h1等）的权重为1。
• 类选择器（如.class）的权重为10。
• ID选择器（如#id）的权重为100。
• 属性选择器（如[attr]）的权重为10。
• 伪类选择器（如:hover、:active等）的权重为10。
• 通配符选择器（如*）的权重为0。

如果多个选择器同时应用于同一元素，那么权重最高的那个选择器的样式规则生效。如果权重相同，那么最后一个声明的样式规则生效。这就是所谓的层叠 （cascading）。

继承

CSS选择器优先级还考虑了继承 的原则。继承是指一个元素的样式可以被其子元素继承。例如，如果一个元素具有红色背景，那么它的子元素也会具有红色背景，除非子元素有自己的样式声明覆盖了父元素的声明。

继承可以使您更轻松地创建一致的外观，而无需为每个元素单独声明样式。但是，如果您需要覆盖父元素的样式，可以使用!important声明来强制应用您的样式。

结论

CSS选择器优先级是一个重要的概念，它可以帮助您创建更简洁、更高效的样式表，并避免样式冲突。通过理解权重、层叠和继承的原则，您可以更好地控制您的CSS代码，并创建出您想要的设计。

实例

以下是一个实例，展示了如何使用选择器优先级来控制样式：

<div class="container">
  <div class="header">
    <h1>标题</h1>
  </div>
  <div class="content">
    <p>内容</p>
  </div>
</div>

/* 容器样式 */
.container {
  width: 100%;
  margin: 0 auto;
  padding: 10px;
  background-color: #fff;
}

/* 标题样式 */
.header {
  background-color: #f0f0f0;
  padding: 10px;
}

/* 标题文本样式 */
.header h1 {
  font-size: 24px;
  font-weight: bold;
  color: #333;
}

/* 内容样式 */
.content {
  background-color: #ffffff;
  padding: 10px;
}

/* 内容文本样式 */
.content p {
  font-size: 16px;
  color: #666;
}

/* 重要样式 */
.important {
  color: red !important;
}

在这个例子中，.container类的样式会应用于所有.container元素。.header类的样式会应用于所有.header元素，并且会覆盖.container类的样式。.header h1类的样式会应用于所有.header元素中的<h1>元素，并且会覆盖.header类的样式。

.content类的样式会应用于所有.content元素。.content p类的样式会应用于所有.content元素中的<p>元素，并且会覆盖.content类的样式。

.important类的样式会应用于所有.important元素，并且会覆盖所有其他样式，因为使用了!important声明。