什么是 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 文档中只能使用一次。

<h3id="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 特异性的层次结构中排名最低。

使用 Rank 对 CSS 特异性进行评分

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

对于内联样式，我们将获得这样的特异性评分：

在这种情况下，内联样式的分数（用最简单的术语来说）为1000。单个 ID 选择器会将 1 添加到 ID 下方的框中，从而有效地给出0100的分数。让我们看一些具体的例子，以使其更清楚。

CSS 特殊性规则和示例

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

假设我们的 HTML 标记中有一个这样的片段——一个h1嵌套在两个 div元素中的标题：

<div>

    <div>

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

    </div>

    </div>

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

.hello-header {

    color: red

    }

 

    div > div > h1 {

    color: blue

    }

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

 与三个元素选择器相比：

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

See the Pen  specificity 5 by Envato Tuts+ (@tutsplus)  on CodePen.

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

最后一条规则获胜

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

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

.hello-header {color: blue}.hello-header {color: red}

大胆猜测。

See the Pen  specificity 3 by Envato Tuts+ (@tutsplus)  on CodePen.

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

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

h1 {

    color: blue

    }

 

    h1::first-line {

    color: red

    }

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

See the Pen  specificity 4 by Envato Tuts+ (@tutsplus)  on CodePen.

ID 选择器覆盖属性选择器

如果你有这样的 HTML 代码：

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

具有以下样式规则：

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

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

See the Pen  specificity 6 by Envato Tuts+ (@tutsplus)  on CodePen.

这两种样式都针对元素的 ID，但第一个声明使用 ID 选择器（0100点），而第二个声明通过属性选择器（0010点）这样做。

内联样式有更多的特殊性

正如我们所提到的，在元素本身的 style 属性上定义的规则甚至更具体，因为它们“最接近”要设置样式的元素。这些类型的样式会覆盖其他地方定义的样式。

在这种情况下，紫色超出了前面示例中使用的红色和绿色的排名（1000对0100和0010）。

See the Pen  specificity 6 by Envato Tuts+ (@tutsplus)  on CodePen.

!重要规则

你可能会想，!important规则在哪里适合？!important当所有其他方法都失败时，该关键字通常用于赢得 CSS 特异性战争的最后一搏。让我们通过在上面的最后一个示例中添加一个新规则来查看它的实际效果。

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

h1#hello-header {

    color: green

    }

 

    h1[id=hello-header] {

    color: red

    }

 

    h1 {

    color: blue !important

    }

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

See the Pen  specificity 7 by Envato Tuts+ (@tutsplus)  on CodePen.

重要的是要知道这条规则与特定性无关，它只是覆盖其他规则并且它的使用被认为是不好的做法。

通用选择器

通用选择器针对整个页面上的任何内容。这是一个通用选择器的示例：

* {color: green;}

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

结论

当你下次遇到风格冲突的问题时，不要把头发拉出来！冷静一下，记住从 内联样式开始的特殊层次结构， 通过 ID、 类、属性和伪类选择器 到 元素和伪元素选择器。

并且在编写 CSS 时请记住，您应该只在需要时尽可能具体，而不是更多。通过对你的风格规则过于具体，你会在某些情况下更难对抗这些风格。