CSS Specificity

当多个冲突的 CSS 规则指向同一个元素时，浏览器会遵循一些规则来确定哪一个。特异性就是帮助浏览器决定哪个属性值最相关的那个。它决定了哪个样式声明被应用到元素上。

在深入了解特异性之前，让我们先讨论一些相关要点。

• CSS 特异性只有在多个选择器影响同一个元素时才重要。在这种情况下，浏览器需要一种方法来确定要应用于匹配元素的样式，而 CSS 特异性就是实现这一目的的方式。
• 当两个或多个选择器的特异性值相等时，则采用后面的那个。
• 通用选择器（*）和继承的值具有较低的特异性，即 0 特异性。
• style 属性的特异性值比选择器（除了样式表选择器中的 !important）要高。
• !important 会改变选择器的特异性。当两个选择器的特异性相等时，具有 !important 的选择器。

特异性层级

每个选择器在层级中都有一个位置。主要有四个类别定义了选择器的特异性级别。

内联样式：它直接附加到要设置样式的元素上。例如：<p style="color: red;">。它具有最高的优先级。

ID：它是页面元素的一个唯一标识符，具有第二高的优先级。例如：#para。

类、属性和伪类：它包括类、属性和伪类（如 :focus, :hover 等）。

元素和伪元素：它包括元素的名称（div, h1）和伪元素（如 :after 和 :before）。它们具有最低的优先级。

特异性规则

特异性是应用于 CSS 声明的权重。它由匹配选择器中每种选择器类型的数量决定。让我们看看特异性的计算。

下面将结合示例讨论特异性规则。

TID 选择器的特异性高于属性选择器。

让我们尝试通过一个例子来理解它。

示例

在此示例中，我们将使用带有 background-color 属性的 id 选择器。

特异性相同时，后面的规则生效。

在外部样式表中，如果应用了相同的规则两次，则会应用后面的（或最后的）规则。

示例

在此示例中，元素名称的特异性相同。在这种情况下，将考虑最后指定的元素名称。

类选择器的特异性大于元素选择器。

类选择器（.nav, .high 等）比元素选择器（如 div, h1, p 等）的特异性更高。

示例