假如您正在使用以下HTML和CSS：

<button class="branding">Hello, Specificity!</button>

button {
  color: red;
}

.branding {
  color: blue;
}

这里有两个相互竞争的CSS规则，一个将按钮字体颜色设为红色，另一个将按钮字体颜色设为蓝色。那么，那个规则将实际应用于元素？理解CSS规范关于特异性的算法是帮助我们理解这种竞争规则的关键。

特异性评分

每个选择器规则都有一个评分。您可以将特异性视为总分，每种选择器类型都会为其赢得分数。得分最高的的选择者获胜。由于实际项目的复杂性，合理的特异性分数是确保您期望应用的CSS规则保持适用的关键，保持较低的分数以防止规则变得更加复杂。特异性分数应该只是我们需要的那样高，而不是越高越好。因为未来你可能需要应用一些更重要的CSS规则。如果你争取最高分，那么你的维护工作将会变得越来越困难。

选择器类型评分列表

每种选择器都会获得积分。您可以将所有的这些评分加起来以计算选择器的整体特异性总分。

通用选择器

通用选择器 没有特异性, 得0分。这意味着任何具有一分及以上评分的规则都会覆盖它。

* {
  color: red;
}

类型或伪元素选择器

类型选择器 或 伪元素选择器 获得1 分特异性评分。

类型选择器

div {
  color: red;
}

伪元素选择器

::selection {
  color: red;
}

类，伪类或属性选择器

类选择器、伪类选择器 或 属性选择器 获得 10 分特异性评分。

类选择器

.my-class {
  color: red;
}

伪类选择器

:hover {
  color: red;
}

属性选择器

[href='#'] {
  color: red;
}

:not() 伪类本身对特异性计算没有任何添加。但是，作为参数传入的选择器确实会添加到特异性计算中。

div:not(.my-class) {
  color: red;
}

这个示例有 11个特异性积分，因为它有一个类型选择器（div）和一个类选择器（.my-class）。

ID选择器

只要您使用 ID选择器 (#myID) 而不是属性选择器 ([id="myID"])，ID选择器会获得 100 分特异性评分。

#myID {
  color: red;
}

内联样式属性

CSS直接应用于HTML元素的 style 属性，获得 1,000 分的特异性分数。这意味着为了在 CSS中覆盖它，您必须编写一个非常具体的选择器。

<div style="color: red"></div>

!important规则

最后，CSS值末尾的 !important 获得 10,000 分的特异性分数。这是单个项目可以获得的最高特异性。

.my-class {
  color: red !important; /* 10,000 points */
  background: white; /* 10 points */
}

上下文特异性

匹配元素的每个选择器的特异性积分加在一起。考虑这个HTML示例：

<a class="my-class another-class" href="#">A link</a>

这个A链接有两个类选择器。添加以下CSS，它获得 1 分特异性积分：

a {
  color: red; /* 1 point */
}

引用此规则中的一个类选择器，它现在有 11 分特异性积分：

a.my-class {
  color: green; /* 11 points */
}

将另一个类添加到选择器中，它现在有 21 分特异性积分：

a.my-class.another-class {
  color: rebeccapurple; /* 21 points */
}

将 href 属性添加到选择器中，它现在有31 分特异性积分：

a.my-class.another-class[href] {
  color: goldenrod; /* 31 points */
}

最后，添加一个 :hover 伪类到选择器，选择器最终有 41 分特异性积分：

a.my-class.another-class[href]:hover {
  color: lightgrey; /* 41 points */
}

原文链接

#Specificity