CSS 特异性

快速概要

本文将介绍 CSS 特异性、特异性排名等方面的技巧和窍门，以及如何计算 CSS 特异性。

通过匹配不同的 CSS 选择器，一个 HTML 元素可以附加多个 CSS 规则。优先级最高的选择器将“生效”，其样式声明将应用于该 HTML 元素。

简而言之，特异性是浏览器用来确定与元素最相关的 CSS 声明的算法，进而决定要应用于元素的属性值。

我们来看一个例子

.title {
        background-color: green;
      }
h1 {
     background-color: red;
   }
<h1 class="title">Hello World</h1>

上面的代码中存在一个冲突的声明。我们的 HTML 元素同时匹配了.titleclass 选择器和 h1 元素选择器。它确实是一个h1元素，并且也有一个.title类名。每个选择器对应一个不同的属性。猜猜这个元素会具有background-color哪个background-color属性？h1

你可能会说它是红色的，因为h1元素选择器位于 .title 类选择器之后。这就是结果。

是的，它是绿色的。应用了类选择器规则。这是因为.title类选择器的优先级高于h1元素选择器。

因此，当多个规则之间存在 CSS 属性冲突时，会选择具有最具体选择器的规则。

特异性排名

CSS 规则的特异性排名如下，从最具体到最不具体。

1. 内联样式 - 示例：<h1 style="color: pink;">
2. ID 选择器 - 示例：#navbar
3. 类选择器.myClass、属性选择器[type="radio"]和伪类:hover
4. 元素选择器div和伪元素:before

如何计算特异性？

以下是选择器的特异性值。

• 内联样式的特异性为 10000。
• 每个匹配的ID 选择器加 100
• 每个匹配的类选择器、属性选择器和伪类加 10 。
• 每个匹配的元素选择器和伪元素加 1

例子

#btn {
   background-color: red; /* 100 */
}

button.btn[type="button"] {
    background-color: green; /* 1 + 10 + 10 = 21*/
}

.btn {
    background-color: blue; /* 10 */
}
<div id="container">
   <button class="btn" id="btn" type="button">Button</button>
</div>

1. 第一个声明只有一个 ID 选择器，其特异性值为 100。
2. 第二个声明包含一个值为 1 的元素选择器、一个值为 10 的类选择器和一个值为 10 的属性选择器。10 + 10 + 1 = 21
3. 第三条声明只是一个类选择器，其特异性值为 10。

因此，将应用第一个样式声明，因为第一个声明的优先级最高，为 100。

注意：内联样式具有最高优先级，始终会覆盖作者样式表中的任何样式。覆盖内联样式的唯一方法是使用 `important`。

例子

h1{
  color: black;
}
h1#title {
  color: green;
}
<h1 id="title" style="color: pink;">Heading</h1>

由于内联样式具有最高的特异性值 1000，因此将应用内联样式。

！重要的

标记为“重要”的 CSS 声明会覆盖任何冲突的声明，即使选择器不够具体。
使用“重要”属性被认为是一种不良做法，应该避免。它会使 CSS 问题更加复杂，并降低样式表的可维护性。

最好提高选择器的特异性，使其大于其他声明。

更具体的规则

1. 通用选择器(*)没有特异性值，这意味着当其他选择器与通用选择器冲突时，通用选择器优先。

2. 如果多个冲突的样式声明具有相同的特异性，则最后声明的样式生效。

结论

本文介绍了 CSS 特异性规则以及如何计算特异性。

作为前端开发人员，了解样式特异性至关重要，我希望这篇文章能帮助你理解 CSS 样式特异性。