CSS特异性

了解CSS特殊性的含义及其重要性

当一个元素受到影响相同属性的具有不同选择器的多个规则作为目标时，会发生什么？

例如，让我们谈谈这个元素：

<p class="dog-name">Roger</p>

我们可以有

.dog-name {
  color: yellow;
}

另一个针对的规则p，它将颜色设置为另一个值：

p {
  color: red;
}

另一个针对的规则p.dog-name。哪个规则将优先于其他规则，为什么？

输入特异性。更具体的规则将获胜。如果两个或多个规则具有同样的特异性，最后出现的那个胜。

有时，实践中更具体的内容会使初学者有些困惑。我想说的是，那些不经常查看或忽略这些规则的专家也会感到困惑。

如何计算特异性

特异性是使用惯例计算的。

我们有4个插槽，每个插槽都从0开始：0 0 0 0。左侧的插槽最重要，最右侧的插槽最不重要。

就像它适用于十进制系统中的数字一样：1 0 0 0高于0 1 0 0。

Slot 1

第一个插槽，最右边的插槽，最不重要。

当我们有一个类型选择器。类型是标签名称。如果规则中有多个类型选择器，则相应地增加此插槽中存储的值。

例子：

p {
} /* 0 0 0 1 */
span {
} /* 0 0 0 1 */
p span {
} /* 0 0 0 2 */
p > span {
} /* 0 0 0 2 */
div p > span {
} /* 0 0 0 3 */

Slot 2

第二个插槽增加3个位：

类选择器
伪类选择器
属性选择器

每当规则满足其中一个条件时，我们就会从右边开始增加第二列的值。

例子：

.name {
} /* 0 0 1 0 */
.users .name {
} /* 0 0 2 0 */
[href$='.pdf'] {
} /* 0 0 1 0 */
:hover {
} /* 0 0 1 0 */

当然，插槽2选择器可以与插槽1选择器结合使用：

div .name {
} /* 0 0 1 1 */
a[href$='.pdf'] {
} /* 0 0 1 1 */
.pictures img:hover {
} /* 0 0 2 1 */

类的一个不错的窍门是，您可以重复相同的类并提高特异性。例如：

.name {
} /* 0 0 1 0 */
.name.name {
} /* 0 0 2 0 */
.name.name.name {
} /* 0 0 3 0 */

Slot 3

广告位3在CSS文件中包含可能影响CSS特异性的最重要的内容：id。

每个元素都可以有一个id属性已分配，我们可以在样式表中使用该属性来定位元素。

例子：

#name {
} /* 0 1 0 0 */
.user #name {
} /* 0 1 1 0 */
#name span {
} /* 0 1 0 1 */

Slot 4

广告位4受内联样式的影响。任何内联样式将优先于外部CSS文件或内部CSS文件中定义的任何规则。style标签在页面标题中。

例子：

<p style="color: red">Test</p> /* 1 0 0 0 */

即使CSS中的其他任何规则定义了颜色，也将应用此内联样式规则。除了一种情况-如果!important is used, which fills the slot 5.

重要性

规则的结尾是否具体无所谓!important：

p {
  font-size: 20px !important;
}

该规则将优先于任何更具体的规则

新增中!important根据特定性规则，CSS规则中的规则将使该规则比其他任何规则都更加重要。另一个规则可以优先的唯一方法是!important同样，并且在其他不太重要的广告位中具有更高的特异性。

尖端

通常，您应该使用所需的特异性，但不能更多。这样，您可以精心制作其他选择器以覆盖之前的规则设置的规则，而不会发疯。

!importantCSS为我们提供了一个备受争议的工具。许多CSS专家主张不要使用它。我发现自己正在使用它，尤其是在尝试某些样式时，并且CSS规则具有太多的特殊性，因此我需要使用!important使浏览器应用我的新CSS。

但是一般来说!important在您的CSS文件中应该没有位置。

使用id样式CSS的属性也有很多争议，因为它具有很高的特异性。一个好的替代方法是使用类，因为它们的特异性较低，因此更易于使用，并且功能更强大（您可以为一个元素使用多个类，并且一个类可以多次重用）。

计算特异性的工具

您可以使用该网站https://specificity.keegan.st/自动为您执行特异性计算。

这特别有用，特别是在您尝试解决问题时，因为它可能是一个不错的反馈工具。

免费下载我的CSS手册