什么是CSS特异性及其工作方式？

使用CSS时，样式冲突可能会给您带来麻烦，尤其是当您不知道冲突的来源时。 本教程将使您对CSS的特性有深入的了解，这将有助于填补任何知识空白，从而最终不会使您摆脱沮丧。

注意 ：也许您是经验丰富CSS专业人士？ 自CSS诞生以来，这是开发人员一直喜欢谈论的话题，但是刷新您的记忆总是很有趣的！

您需要了解的有关CSS的一切

本教程是我们的“ 学习CSS：完整指南”的一部分— 将其签出并获得书签！

什么是CSS特异性？

MDN很好地表达了它（一如既往）：

“特殊性是浏览器确定哪些CSS属性值与某个元素最相关的方法，因此将被应用。”

这意味着CSS特定性是浏览器用来确定将哪些开发人员定义的样式应用于特定元素的一组规则。 为了将样式应用于特定元素，开发人员必须遵守规则，以便浏览器知道如何应用样式。

当两种或多种样式针对特定元素时，具有最高特异性的样式就是所应用的样式。

了解CSS特殊性的层次结构

样式的特异性取决于与其他冲突选择器相比时选择器的排名。 选择器定义如何定位要在CSS中设置样式的元素。 让我们看一下从最高到最低的层次结构中的选择器：

内联样式

这些是HTML文档中定义的样式，直接附加到要设置样式的元素上。 例如：

<h3 style='color: red'>Hello World</h3>

这类样式并不常用，因为它被认为是“分离关注点”并在外部样式表中包含样式的最佳实践。 但是，在样式层次结构中，内联样式排名最高。

ID选择器

ID选择器是队列中的下一个。 这些是使用元素ID定位到元素的选择器。 ID是唯一的； 一个元素只能有一个ID，并且该ID在HTML文档中只能使用一次。

<h3 id="sub-header">Hello World</h3>

可以用内联样式覆盖它们。

类，属性和伪类

ID选择器之后是类选择器，属性选择器和伪类选择器。 这是一些示例标记，显示了每个对应CSS选择器：

<!-- Class Selector -->
<h3 class="hello-header">Hello World!</h3>
<!-- .hello-header { color: blue } -->

<!-- Attribute Selector -->
<a href="https://webdesign.tutsplus.com">Web Design Tutorial</a>
<!-- a[href="http://webdesign.tutsplus.com"] { color: green } -->

<!-- Pseudo Class Selector -->
<button>Delete</button>
<!-- button:hover { background-color: blue } -->

元素和伪元素

元素选择器允许您设置所选元素的样式，而伪元素选择器允许您设置所选元素的一部分的样式。

<!-- Element selector -->
<p>This is an element selector</p>
<!-- p { color: red } -->

<!-- Pseudo-element selector -->
<p>This is a paragraph</p>
<!-- p::first-letter { color: green } -->

这些选择器在CSS特异性层次结构中排名最低。

使用等级对CSS特异性进行评分

为了计算样式的特殊性，我们将从每个等级的0开始。 然后，我们可以基于用于定位元素的选择器来增加排名。 这是我们起点的外观：

对于内联样式，我们将按以下方式对特异性进行评分：

在这种情况下，内联样式的得分（用最简单的话）为1000 。 单个ID选择器会将1添加到ID下方的框中，有效得分为0100 。 让我们看一些更清楚的例子。

CSS专用规则和示例

类选择器覆盖多个元素选择器

假设我们在HTML标记中有一个类似这样的代码段-嵌套在两个div元素中的h1标题：

<div>
  <div>
    <h1 class="hello-header">Hello World!</h1>
  </div>
</div>

在我们CSS中，我们有以下两种样式，都针对相同的h1标题：

.hello-header {
  color: red
}

div > div > h1 {
  color: blue
}

您认为将应用哪个？ 在这种情况下，我们有一个类选择器：

与三个元素选择器：

10个针对3个特异性点。 红胜：

即使选择器中包含更多元素，也会选择使用类应用的样式。

最后一条规则获胜

当您使用完全相同的选择器定位元素并使用不同的样式时，会发生什么。 像下面的例子吗？

<h1 class="hello-header">Hello World!</h1>

.hello-header {
  color: blue
}

.hello-header {
  color: red
}

大胆猜测。

较低的规则（最近处理的样式规则）被视为“最接近元素”，因此在这种情况下是最具体的。 基于这一事实，它将应用于元素。 这也适用于所使用的选择器具有相同CSS特异性的所有情况。

下面是一个示例，我们使用元素和伪元素选择器-具有相同特异性的选择器。

h1 {
  color: blue
}

h1::first-line {
  color: red
}

在这种情况下，应用于元素的样式是最后一种样式。

ID选择器覆盖属性选择器

如果您有这样HTML代码：

<h1 id="hello-header">Hello World!</h1>

具有以下样式规则：

h1#hello-header {
  color: green
}

h1[id=hello-header] {
  color: red
}

您应该知道，第一个将覆盖最后一个，如下所示。

这两种样式都以元素的ID为目标，但是第一种声明使用ID选择器（ 0100点），而第二种声明通过属性选择器（ 0010点）。

内联样式更具特异性

如前所述，在元素本身的style属性上定义的规则更具特异性，因为它们与要设置样式的元素“最接近”。 这些样式会覆盖其他地方定义的样式。

在这种情况下，紫色胜过上一示例中使用的红色和绿色（ 1000对应 0100和0010 ）。

重要规则

您可能在想， !important规则适合什么地方？ !important关键字通常在最后一次尝试中使用，以在所有其他方法均失败时赢得CSS特异性战争。 让我们通过在上面的最后一个示例中添加新规则来查看它的作用。

使我们的声明看起来像这样会改变整个游戏。

h1#hello-header {
  color: green
}

h1[id=hello-header] {
  color: red
}

h1 {
  color: blue !important
}

如果没有!important规则，则最后一种样式（作为元素选择器）排名最低，因此没有机会。

重要的是要知道此规则与特异性无关，它只是覆盖其他规则，其使用被认为是不良做法。

通用选择器

通用选择器将整个页面上的所有内容作为目标。 这是通用选择器的示例：

* {
  color: green;
}

它们也可以用作子选择器（例如： div * {} ）。 这些选择器的特异性为0000 。

结论

接下来，如果您遇到样式冲突的问题，请不要拉扯头发！ 冷静一下，记住从ID ， 类 ， 属性和伪类选择器到元素和伪元素选择器的 内联样式开始的特异性层次结构。

而且，在编写CSS时，请记住，您应该只根据具体情况而定，而不能过多。 通过对样式规则过于具体化，您将在某些情况下更加难以应对这些样式。

翻译自: https://webdesign.tutsplus.com/tutorials/what-is-css-specificity--cms-34141