CSS选择器：特异性

以下节选自Tiffany B. Brown撰写的《CSS大师》一书。本书在全球各地的商店有售，您也可以在此处购买电子书版本。

CSS 特异性决定了哪些样式声明最终应用于元素。通配符选择器 (*) 特异性最低，ID 选择器特异性最高。子孙选择器（例如 p img）和子选择器（例如 .panel > h2）比类型选择器（例如 p、img 或 h1）特异性更高。

乍一看，计算精确的特异性值似乎很棘手。如《选择器级别 3》中所述，您需要：

• 统计选择器中 ID 选择器的数量 (= A)
• 统计选择器中类选择器、属性选择器和伪类的数量 (= B)
• 统计选择器中类型选择器和伪元素的数量 (= C)
• 忽略通配符选择器

然后将这些 A、B 和 C 值组合起来形成最终的特异性值。例如，ID 选择器 #foo 的特异性为 1,0,0。属性选择器（例如 [type=email]）和类选择器（例如 .chart）的特异性为 0,1,0。添加伪类（例如 :first-child，例如 .chart:first-child）会使特异性变为 0,2,0。但是，使用简单的类型或元素选择器（例如 h1 或 p）只会使特异性变为 0,0,1。

注意：计算特异性

Keegan Street 的特异性计算器和 Joshua Peek 的 CSS Explain 有助于学习和计算选择器特异性。

当然，复杂的选择器和组合选择器会产生更高的特异性值。让我们来看一个例子。考虑以下 CSS：

<code>ul#story-list > .book-review {
    color: #0c0;
}

#story-list > .book-review {
    color: #f60;
}</code>

这两个规则集相似，但并不相同。第一个选择器 ul#story-list > .bookreview 包含类型选择器 (ul)、ID 选择器 (#story-list) 和类选择器 (.bookreview)。它的特异性值为 1,1,1。第二个选择器 #story-list > .book-review 只包含 ID 选择器和类选择器。它的特异性值为 1,1,0。即使我们的 #story-list > .book-review 规则成功应用于 ul#story-list > .bookreview，但前者的特异性更高，这意味着具有 .book-review 类的元素将为绿色而不是橙色。

诸如 :link 或 :invalid 之类的伪类与类选择器具有相同的特异性级别。a:link 和 a.external 的特异性值均为 0,1,1。类似地，诸如 ::before 和 ::after 之类的伪元素与类型或元素选择器一样特异。如果两个选择器的特异性相同，则级联生效。这是一个例子：

<code>a:link {
    color: #369;
}
a.external {
    color: #f60;
}</code>

如果我们应用此 CSS，则除应用了 .external 类的链接外，所有链接都将为石板蓝。这些链接将改为橙色。

保持较低的特异性有助于防止选择器蔓延，即选择器特异性和长度会随着时间的推移而增加的趋势。这通常发生在您向团队添加新开发人员或向网站添加新内容形式时。选择器蔓延还会导致长期的维护难题。您最终要么使用更特异的选择器来覆盖其他规则集，要么需要重构代码。更长的选择器还会增加 CSS 文件的权重。

我们在第 2 章中讨论了保持低特异性的策略。

结论

阅读本章后，您应该对 CSS 选择器有很好的理解。具体来说，您现在应该知道如何：

• 使用选择器将 CSS 应用于特定元素、伪元素和伪类
• 理解伪元素和伪类之间的区别
• 使用选择器级别 3 和 4 规范中引入的较新的伪类
• 计算特异性

在下一章中，我们将介绍编写可维护、可扩展 CSS 的一些黄金法则。

关于 CSS 选择器和特异性的常见问题 (FAQ)

理解 CSS 特异性在 Web 开发中的重要性是什么？

CSS 特异性是 Web 开发中的一个关键概念，因为它决定了浏览器应用哪个 CSS 规则。当多个 CSS 规则可以应用于某个元素时，浏览器会遵循特异性规则来决定使用哪个规则。理解 CSS 特异性可以帮助开发人员编写更高效、更有效的 CSS 代码，避免不必要的覆盖，并更有效地排除 CSS 问题。

如何计算 CSS 特异性？

CSS 特异性的计算基于 CSS 规则中使用的不同类型的选择器。每种类型的选择器都有不同的特异性值。内联样式具有最高特异性，其次是 ID 选择器、类选择器、属性选择器和伪类，最后是类型选择器和伪元素。CSS 规则的特异性是其选择器特异性值的总和。

你能用一个例子解释 CSS 特异性的概念吗？

让我们考虑一个例子。假设我们有一个具有类选择器 .class1 的 CSS 规则，另一个规则具有 ID 选择器 #id1。如果这两个规则可以应用于同一个元素，则将应用具有 ID 选择器的规则，因为 ID 选择器的特异性高于类选择器。

当两个 CSS 规则具有相同的特异性时会发生什么？

当两个 CSS 规则具有相同的特异性时，CSS 代码中最后出现的规则将被应用。这是因为 CSS 在处理具有相同特异性的规则时遵循“最后规则获胜”的策略。

如何覆盖 CSS 特异性？

您可以通过提高 CSS 规则的特异性来覆盖 CSS 特异性。这可以通过向规则添加更特异的选择器来实现。另一种覆盖 CSS 特异性的方法是使用 !important 规则。但是，应尽可能避免使用 !important，因为它会使您的 CSS 代码更难以管理和调试。

继承在 CSS 特异性中的作用是什么？

继承是 CSS 中的一个特性，其中某些特定类型的属性会自动从父元素传递到其子元素。但是，继承的样式具有最低的特异性，并且可以很容易地被应用于元素的任何直接样式覆盖。

通配符选择器如何影响 CSS 特异性？

通配符选择器 (*) 对 CSS 特异性没有影响。这意味着它的特异性值为 0,0,0,0。因此，在同一规则中使用的任何其他选择器都将覆盖通配符选择器。

CSS 中伪元素的特异性是多少？

CSS 中伪元素的特异性为 0,0,0,1。这意味着它们与类型选择器（如 div、p 等）具有相同的特异性，并且会被类选择器、ID 选择器和内联样式覆盖。

:not() 伪类如何影响 CSS 特异性？

CSS 中的 :not() 伪类不会增加选择器的特异性。相反，特异性的计算基于传递给 :not() 函数的参数。例如，在 :not(.class1) 中，特异性与 .class1 相同。

我可以在单个 CSS 规则中使用多个选择器吗？它如何影响特异性？

是的，您可以在单个 CSS 规则中使用多个选择器。此类规则的特异性是其所有选择器特异性的总和。例如，在 #id1.class1 中，特异性是 #id1 和 .class1 特异性的总和。

以上是CSS选择器：特异性的详细内容。更多信息请关注PHP中文网其他相关文章！