Css 简明教程

CSS - Specificity

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

CSS Specificity - Selector Weight Categories

任何选择器的特殊性都是根据赋予它的权重计算的。有四个不同的类别大致概述了任何选择器的特殊性级别。这些类别是：

Inline style

内联样式声明被赋予最高优先级。参考以下给出的语法：

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

Id

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

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

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

Class, pseudo-class, attribute selector

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

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

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

Element, pseudo-element

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

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

<h1>Example</h1>

CSS Specificity - Score Of Each Selector Type

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

No value ： Universal selector ( ）、：where() 伪类、组合器（+、>、~、_、||）、嵌套组合器(&)具有 *no 特殊性和 0 point 分数。
Element / Pseudo-element selector ：它获得 1 point 特殊性。
Class, pseudo-class, or attribute selector ：它获得 10 points 特殊性。
Id selector ：它获得 100 points 特殊性。
Inline style attribute ：它获得 1000 points 特殊性。
!important rule ：该规则获得 10000 points 特殊性。如果将 !important 规则应用于任何 CSS 属性，它将优先于所有其他属性。

CSS Specificity - Exception Cases

伪类，如匹配任何 :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 Specificity - Handling Issues

以下是处理代码中特殊性问题的一些技巧：

使用级联层和低权重特殊性，而不是 * !important* ，以便可以轻松地覆盖样式。
可以在不增加特殊性的情况下使选择器更具体。
通过减少ID特殊性，可以使用元素的id作为属性选择器，而不是作为id选择器，这使得元素更具体，而无需增加额外的特殊性。
通过在复合选择器中复制id、类、伪类或属性选择器，可以增加特殊性，同时可以轻松地控制特定部分。
通过使用层叠层的方式，启用一组样式优先于其他组样式。例如，当来自不同层的两个选择器匹配同一元素时，起源和重要性优先。输掉样式表中该选择器的特殊性变得无关紧要。

CSS Specificity - Points To Remember

以下是关于特殊性的一些重要的注意事项：

特殊性仅适用于在相同起源或层叠层中某个元素被多个声明定位时。如果匹配的选择器来自不同的起源，则层叠将决定哪个声明优先。
当两个选择器位于相同的层叠层和起源，并且具有相同的特殊性时，则计算范围接近度。在这种情况下，具有低范围接近度的规则集优先。
当两个选择器的范围接近度也相同时，出现来源顺序。当一切都相等时，最后一个选择器获胜。
无论继承规则的特殊性如何，直接定位元素的样式总将优先于继承的样式。
在文档树中，元素的接近度对特殊性没有影响。

CSS Specificity - Equal Specificity (Latest Wins)

以下示例演示了当两个选择器具有相同的特殊性时，最新 CSS 样式或规则将得到应用。此处的选择器是 @ {s0} 元素，它具有相同的特殊性，并被赋予两个样式声明，但输出显示最后一个规则已应用，标题文本的背景色为红色，文本颜色为白色。

<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 Specificity - Specificity Hierarchy (Inline Style)

以下示例针对不同类型的选择器演示了特殊性的顺序。内联样式接管所有其他声明。

<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 和元素。

CSS Specificity - Specificity Hierarchy (ID declaration)

以下示例针对不同类型的选择器演示了特殊性的顺序。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 (Class declaration)

以下示例针对不同类型的选择器演示了特殊性的顺序。类声明接管元素声明。

<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 Specificity - Specificity Hierarchy (With !important Rule)

以下示例演示了如果某个选择器被标记为 !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>