CSS 特异性解释：如何控制哪种样式获胜

您是否曾经花费数小时调整 CSS，想知道为什么这种顽固的样式不适用？欢迎来到特异性的世界。

特异性是指当多个规则针对同一元素时，浏览器如何决定应用哪个 CSS 规则。如果不理解它，您的样式表很快就会变得一团糟。让我们来分解一下。

特异性层次结构

1. 通用选择器：零点竞争者

通用选择器 (*) 位于特异性链的底部，具有 0 点。这就像对所有事情的一揽子规则，但几乎会被其他任何事情所推翻。

示例：

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

即使有 * { color: red; }，一个

；将为蓝色，因为元素选择器获胜。

2. 元素选择器：1 个特异性点

元素选择器（h1、p、div）比通用选择器更强，带有 1 点。

示例：

h1 {
  color: green;
}

此规则将覆盖针对同一元素的通用选择器。

3.类、伪类或属性选择器：10分

像 .button、:hover 或 [type="text"] 这样的选择器更加具体，有 10 分。

示例：

.button {
  color: purple;
}

这将覆盖通用选择器和元素选择器。

4. ID选择器：100分

ID (#submitButton) 的功能明显更强大，有 100 分。谨慎使用它们，因为它们会使样式更难管理。

示例：

#submitButton {
  background-color: yellow;
}

5. 内联样式：1,000 点 – 重量级

内联样式胜过一切，除了 !important。

示例：

<div>



<h4>
  
  
  6. The Almighty !important
</h4>

<p>Adding !important forces a rule to override others, even inline styles. But overusing it can lead to chaos in your CSS. It can be necessary when using third-party libraries to help override predefined styles.</p>

<p><strong>Example:</strong><br>
</p>

<pre class="brush:php;toolbar:false">.button {
  color: red !important;
}

当特异性相关时，顺序很重要

如果两条规则具有相同的特异性，则样式表中稍后出现的规则获胜。

示例：

h1 {
  color: red;
}
h1 {
  color: green;
}

这里，

将为绿色，因为第二条规则较晚。

特异性点回顾

• 通用选择器 (*): 0 分
• 元素选择器（div、p）：1 分
• 类、伪类、属性选择器：10 分
• ID 选择器 (#id)：100 分
• 内联样式：1,000 分
• ！重要：覆盖一切

掌握特异性可以让您编写干净、可维护的 CSS，从而避免无休止的调试。下次当你的风格不正常时，你就会知道该往哪里看。

以上是CSS 特异性解释：如何控制哪种样式获胜的详细内容。更多信息请关注PHP中文网其他相关文章！