CSS 特异性

CSS 中的特异性是一种计算或算法，浏览器可以理解并使用它来确定需要应用于元素的 CSS 声明。它选择具有最高特异性值的选择器，并在任何 HTML 元素上相应地应用样式。例如，如果在 HTML 元素上指定了两个或多个 CSS 规则，则最终将在该元素上应用具有最高特异性值的选择器。

CSS 特异性

CSS 特异性选择器权重类别

任何选择器的特异性都是根据给定的权重计算的。有四种不同的类别，广泛定义了任何选择器的特异性级别。这些类别是:

内联样式

内联样式声明具有最高优先级。请参阅下面给出的语法:

<h1 style="color: blue;">Example</h1>

Id选择器

Id 选择器的优先级高于任何其他选择器，但低于内联样式。示例 - #sample-demo。参考下面给出的语法:

<style>
   #sample-demo {color: blue;}
</style>

<h1 id="sample-demo">Example</h1>

类、伪类、属性选择器

类、伪类和属性选择器的优先级低于 id，但高于元素和伪元素选择器。示例 - .sample-demo、:hover、[href]。请参考下面给出的语法:

<style>
   .sample-demo {color: blue;}
</style>

<h1 class="sample-demo">Example</h1>

元素、伪元素

元素和伪元素的优先级最低。示例:h1、::after 等

<style>
   h1 {color: blue;}
</style>

<h1>Example</h1>

CSS 特异性每个选择器类型的分数

以下列表显示每个选择器获得的分数，根据这些分数，您可以计算选择器的整体特异性。

无值:通用选择器 (*)、:where() 伪类、组合符 (+、>、~、_ 、||)，嵌套组合器 (&) 没有特异性，得 0 分。
元素/伪元素选择器:特异性得 1 分。
类、伪类或属性选择器:它获得 10 点特异性。
Id 选择器:它获得 100 点特异性.
内联样式属性:它获得 1000 点的特异性。
！重要规则:该规则获得 10000 点的特异性。特异性。如果 !important 规则应用于任何 CSS 属性，则它优先于所有其他属性。

CSS 特异性 - 异常情况

伪-类，例如匹配任何 :is()、关系 :has() 和否定 :not() 不是在特异性计算中考虑，但传递给它们的参数是特异性算法的一部分。请参考下面给出的代码块:

h1 {
   /* point of element */
 }
 :is(h1) {
   /* point of element */
 }
 
 h2:nth-last-of-type(n + 2) {
   /* point of pseudo-class and element */
 }
 h2:has(~ h2) {
   /* point of element */
 }
 
 div.outer p {
   /* point of class and element */
 }
 div:not(.inner) p {
   /* point of class and element */
 }

在上面的 CSS 代码块中，:is()、:has() 和 :not() 伪类提供的特异性权重是选择器参数，而不是伪类的参数。

CSS 特异性 - 处理问题

以下是处理代码中的特异性问题的一些提示和技巧:

使用级联层和低权重特异性，而不是!important，以便样式可以很容易被覆盖。
无论添加或不添加特异性，选择器都可以变得更加具体。
通过降低 ID 特异性，其中元素的 id 可以用作属性选择器而不是 id 选择器，使元素更加具体，而无需添加额外的特异性。
通过复制 id、class、pseudo - 复合选择器中的类或属性选择器可提高特异性，并轻松控制特定部分。
通过使用级联，可以使一组样式优先于其他组层。例如，当来自不同层的两个选择器匹配相同元素时，起源和重要性优先。丢失样式表中该选择器的特异性变得无关紧要。

CSS 特异性 - 需要记住的要点

以下是一些需要记住的重要要点:特异性:

仅当同一个元素被同一源或级联层中的多个声明作为目标时，特异性才适用。如果匹配的选择器位于不同的源，则级联决定哪个声明优先。
当两个选择器位于同一级联层且源具有相同的值时，会计算范围邻近度特异性。在这种情况下，具有最低范围邻近度的规则集优先。
当两个选择器的范围邻近度也相同时，源顺序就会出现。当一切都相同时，最后一个选择器获胜。
无论继承规则的特殊性如何，直接目标元素的样式将始终优先于继承的样式。
在文档树中，元素的接近度对特异性没有影响。

CSS 特异性 - 同等特异性 (最新胜利）

以下示例演示了当两个选择器具有相同的特异性时，将应用最新的 CSS 样式或规则。这里的选择器是 h1 元素，它具有相同的特异性，并给出了两个样式声明，但输出显示应用了最后一个规则，并且标题文本的背景颜色为红色，文本颜色为白色。

<html>
<head>
<style>
   h1 {background-color: yellow;
      color: black;
   }
   h1 {background-color: red;
      color: white;
   }
</style>
</head>
<body>
   <h1>Same Specificity</h1>
</body>
</html>

CSS 特异性 - 特异性层次结构（内联样式）

以下示例演示了基于选择器类型的特异性顺序。内联样式接管所有其他声明。

<html>
<head>
<style>
   h1 {background-color: yellow;
      color: black;
   }
   
   #id-heading-color {
      background-color: red;
      color: white;
   }

   .cl-heading-color {
      background-color: aquamarine;
      color: black;
   }
</style>
</head>
<body>
   <p>Note the styling applied on h1 element</p>
   <h1 id="id-heading-color" class="cl-heading-color"  style="background-color: pink; color: blue;">Specificity Order</h1>
</body>
</html>

在上面的示例中，内联样式优先于所有其他声明，即 id、class 和 element。

CSS 特异性 - 特异性层次结构（ID 声明）

以下示例演示了基于选择器类型的特异性顺序。 ID 声明取代类声明。

<html>
<head>
<style>
   h1 {background-color: yellow;
      color: black;
   }
   
   #id-heading-color {
      background-color: red;
      color: white;
   }

   .cl-heading-color {
      background-color: aquamarine;
      color: black;
   }
</style>
</head>
<body>
   <p>Note the styling applied on h1 element</p>
   <h1 id="id-heading-color" class="cl-heading-color">Specificity Order</h1>
</body>
</html>

在上面的示例中，id 声明优先于其他声明，即类和元素。

CSS Specificity - Specificity Hierarchy（类声明）

以下示例演示了基于选择器类型的特异性顺序。类声明接管元素声明。

<html>
<head>
<style>
   h1 {background-color: yellow;
      color: black;
   }
   
   .cl-heading-color {
      background-color: aquamarine;
      color: black;
   }
</style>
</head>
<body>
   <p>Note the styling applied on h1 element</p>
   <h1 class="cl-heading-color">Specificity Order</h1>
</body>
</html>

在上面的示例中，类声明优先于其他声明，即元素。

CSS 特异性 - 特异性层次结构（使用 !important 规则）

以下示例演示了如果选择器被标记为 !important，则特异性的顺序将变得无关紧要。在此示例中，尽管 id 声明优先于所有其他声明，但仍应用元素的样式，因为它被标记为重要。

<html>
<head>
<style>
   h1 {background-color: yellow !important;
      color: black;
   }
   
   #id-heading-color {
      background-color: red;
      color: white;
   }

   .cl-heading-color {
      background-color: aquamarine;
      color: black;
   }
</style>
</head>
<body>
   <p>Note the styling applied on h1 element</p>
   <h1 id="id-heading-color" class="cl-heading-color">Specificity Order</h1>
</body>
</html>

CSS 特异性 选择器权重类别