CSS 特性初学者指南

您是否曾经尝试过覆盖 CSS 规则，却发现它无法正常工作？ 或者注意到当使用不同的 CSS 选择器组合多次定位一个元素时，一次只应用一个规则？ 这都是因为 CSS 特异性规则。

CSS 特异性规则可能是最难理解的概念之一，尤其是对于初学者而言。

如果您刚刚开始使用 CSS，作为标准顺序规则，您可能认为最新的 CSS 规则应该覆盖旧的。 这看起来很简单，但并不总是这样。 这取决于 CSS 的特殊性，何时以及应应用哪个 CSS 规则。

因此，让我们分解什么是 CSS 特异性以及如何有效地使用它。

什么是 CSS 中的特殊性？

简而言之，如果一个元素有多个 CSS 选择器，则将应用具有较高特定值的那个。

不同的选择器具有不同的权重，浏览器将决定哪个与该元素最相关。

它是如何工作的？

选择器的特殊性可以分为以下四个级别：

1. 内联样式或 CSS
2. 身份证
3. 类、伪类和属性
4. 元素或伪元素

内联样式或CSS ，其中 CSS 直接应用于 HTML 文档，看起来像这样<p> 。 内联样式将始终具有最高的特异性级别。

此顺序中的第二个是ID ，例如#content 。 因此，任何使用 ID 的选择器都将具有第二高的特异性级别。

类、伪类和属性在这个顺序中排在第三位。 它们看起来分别像： .post 、 :hover和[title] 。

元素和伪元素的值最小。 li和:after是元素和伪元素的基本示例。

计算

可以使用以下准则计算特异性值：

• 内联样式或 css：1,0,0,0
• 编号：0,1,0,0
• 类或伪类和属性：0,0,1,0
• 元素和伪元素：0,0,0,1
• 通用选择器（*）：0

要检查选择器的特异性级别，您可以使用特异性计算器。

CSS 特异性的基本规则

现在您已经了解特异性是如何组织的，让我们讨论一些通用规则和示例！

这是我将在示例中使用的基本 HTML。 在这里，我在带有#content的容器中有一个小列表。

 [css] <div id="content"> <ul class="list"> <li>Item 1<li> <li>Item 2</li> <li>Item 3</li> </ul> </div> [/css]

规则1

如果一个元素有两个或多个相同的选择器，它们都将具有相同的特异性值，因此将应用较低的一个或最后一个。

在下面的 CSS 片段中，两个选择器具有相同的特异性，因此li颜色将为黄色，因为它被放置在更靠后的位置。

 [css] ul li{ color: green; } ul li{ color: yellow; } [/css]

规则 2

如果一个元素使用了多个选择器，则将应用具有较高特定值的选择器。

在下面的示例中， li是两个不同选择器的目标，并且都影响字体颜色。 那么，应该适用哪条规则呢？

与前面的实例一样，在 CSS 顺序概念中应该应用第二个（因此 li 颜色将为绿色）但是因为.list li具有比ul li更高的特异性值，颜色将保持红色。

 [css] .list li{ color: red; } ul li{ color: green; } [/css]

规则 3

我们看到类在特异性级别上超过元素，现在让我们看看 ID 会发生什么。

在下面的示例中，我们有一个类和 ID 都针对相同的元素并影响字体颜色。 同样的问题：应适用哪条规则？

 [css] .list li{ color: red; } ul li{ color: green; } [/css]

如前所述，ID 比类、属性和元素具有更高的特异性值，因此颜色将是蓝色。 始终以ID为目标以获得更高的特异性级别。

规则 4

!important将覆盖任何特定值的任何选择器。 但请记住!important不应该被过度使用，因为它不被认为是 CSS 最佳实践。

如果您是 CSS 的作者并且没有覆盖现有规则，则几乎不需要使用!important 。

!important仅当您试图覆盖其他人的 CSS 并且您的特殊性无法胜过先前的选择器时使用，尤其是当您无法控制您的 CSS 在 HTML 中的放置顺序时。

这主要发生在使用 WordPress 时，您会发现许多 CSS 文件已经由不同的插件和主题添加。

通常，插件 CSS 特定于插件并使用 ID、inline-css，甚至!important以获得更高的特异性，以避免任何 CSS 冲突。 要覆盖该 CSS，您必须使用更高的特异性； 对于这些场景，您可以使用!important 。

在下面的示例中，我重新创建了以前的场景，其中li以不同的 CSS 选择器为目标，但您可以看到!important覆盖了所有规则并且颜色将变为黄色。

 [css] #content li{ color: blue; } .list li{ color: red; } ul li{ color: green; } ul li{ color: yellow !important; } [/css]

!important将使您能够在任何特定级别之上执行您的 CSS。

使用!important时需要小心，因为您无法覆盖此规则。 覆盖!important唯一方法是稍后在 CSS 中使用另一个!important ，因此如果您不了解它的强大功能，您的 CSS 很容易看起来很乱。

少数例外

元素和伪元素的特殊性最低，但也有一些有趣的（并且有点令人困惑！）例外。 （令人困惑，因为他们似乎不遵守我们刚刚看到的规则。）

在此示例中，您将看到:first-child （伪类）和 :first-line（伪元素）。 我们刚刚了解到伪类会比伪元素有更高的特异性，所以根据这个，段落的第一行颜色应该是绿色，而不是粉红色。

 [css] p:first-child{ color: green; } p::first-line{ color :pink ; } [/css]

您可能认为这里的顺序是个问题，但即使切换顺序也不会改变输出。 特异性计算器显示的图片与结果不同。

这是特异性变得有点混乱的地方。 我只能假设这个结果的原因是:first-line更接近元素并且可能被视为内联样式。 您可以查看 jsfiddle 以获取另一个示例。

如何有效地使用特异性？

如果您了解 CSS 特异性规则，您可以非常有效地使用它并使您的 CSS 可重用。

假设您想使用相同的.button但背景颜色不同，因此您设置了一个特定的选择器： .red-block .button 。

 [css] .button{ background: #97bc2d; font-size: 1em; display: inline-block; } .button a{ display: block; color: #fff; padding: 1em 2em; text-decoration: none; } .red-block .button{ background: red; } [/css]

如果.button包装在.red-block容器中，则默认按钮背景颜色将变为红色。

CSS 特异性在自定义 WordPress 主题时非常有用，您可以在其中尝试用自己的 CSS 覆盖主题作者的 CSS。

要避免的常见错误

有些人使用超特定的选择器，这不是一个好习惯。 仅根据需要具体说明。 例如，此代码片段以li为目标，但过于具体。

 [css] div#content ul.list li{ color: purple; } [/css]

如果您的 CSS 过于具体，它将变得僵化并且难以重用。 您可以轻松地编写.list li而不是div#content ul.list li ，这将使您的 CSS 更清晰。

额外资源

• W3 组织的特异性
• CSS 特异性计算器
• 浏览器漏洞
• IE黑客

结论

如您所见，CSS 特异性是一个重要的工具，每个前端开发人员都应该在他们的工具包中拥有它。 清楚地理解这个概念可以让你成为一名优秀的前端开发人员。