Css 简明教程

CSS - Specificity

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

Specificity in CSS is a calculation or algorithm that is understood and used by the browser to determine the CSS declaration that needs to be applied on an element. It chooses the selector with the highest specificity value and applies the styling accordingly on any HTML element. For instance, if two or more CSS rules are specified on an HTML element, the selector with highest specificity value, will be eventually applied on that element.

CSS Specificity - Selector Weight Categories

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

Specificity of any selector is calculated based on the weightage given it. There are four different categories which broadly defines the specificity level of any selector. The categories are:

Inline style

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

Inline style declaration is given the highest priority. Refer the syntax given below:

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

Id

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

Id selector is given higher priority than any other selector, but lower than the inline style. Example - #sample-demo. Refer the syntax given below:

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

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

Class, pseudo-class, attribute selector

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

Class, pseudo-class and attribute selector is given lower priority than id, but higher than the element and pseudo-element selector(s). Example - .sample-demo, :hover, [href]. Refer the syntax given below:

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

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

Element, pseudo-element

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

The lowest priority is given to the elements and pseudo-elements. Example: h1, ::after, etc.

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

<h1>Example</h1>

CSS Specificity - Score Of Each Selector Type

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

Following list shows the score earned by each selector and based on these scores, you can calculate a selector’s overall specificity.

No value: Universal selector (), :where() pseudo-class, combinators (+, >, ~, _, ||), nesting combinator (&)* has no specificity and scores 0 point.
Element / Pseudo-element selector: It gets 1 point of specificity.
Class, pseudo-class, or attribute selector: It gets 10 points of specificity.
Id selector: It gets 100 points of specificity.
Inline style attribute: It gets 1000 points of specificity.
!important rule: The rule gets 10000 points of specificity. If an !important rule is applied to any CSS property,it takes the precedence over all other properties.

CSS Specificity - Exception Cases

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

The pseudo-classes such as, the matches-any :is(), the relational :has(), and the negation :not(), are not considered in the specificity calcultaion, but the parameters passed to them are part of the specificity algorithm. Refer the code block given below:

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() 伪类提供的特殊性权重是选择器函数的值，而不是伪类。

In the above CSS code block, the specificity weight provided by the :is(), :has() and :not() pseudo-classes is the value of the selector parameter, not of the pseudo-class.

CSS Specificity - Handling Issues

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

Following are some tips and tricks to handle the specificity issues in your code:

Use of cascade layers and low weight specificity, instead of !important, so that the styles can be easily overwritten.
Selectors can be made more specific with or without adding specificity.
By reducing the ID specificity, where the id of an element can be used as an attribute selector rather than an id selector, makes an element more specific without adding extra specificity.
By duplicating id, class, pseudo-class or attribute selectors inside a compound selector, increases specificity along with easy control over the particular section.
Enabling one set of styles to take precedence over other set is by using cascade layers. For example, when two selectors from different layers match the same element, the origin and importance take precedence. The specificity of that selector in the losing stylesheet becomes irrelevant.

CSS Specificity - Points To Remember

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

Following are some important points to remember in regard to specificity:

Specificity is applicable only when the same element is targeted by multiple declarations in the same origin or cascade layer. In case matching selectors are in different origins, the cascade decides which declaration takes precedence.
Scoping proximity is calculated, when two selectors are in the same cascade layer and origin have the same specificity. In such a case the ruleset with the lowest scoping proximity takes precedence.
Source order comes into picture, when the scope proximity is also same for both selectors. When everything is equal, the last selector wins.
Regardless of the specificity of the inherited rule, the styles of a directly targeted element will always take precedence over the inherited styles.
In the document tree, proximity of elements, has no effect on the specificity.

CSS Specificity - Equal Specificity (Latest Wins)

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

Following example demonstrates that when two selectors have the same specificity, the latest CSS style or rule gets applied. Here the selector is h1 element, which has same specificity, and is given two styling declarations, but the output shows that the last rule is applied and the heading text has background color as red and text color as white.

<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)

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

Following example demonstrates the order of specificity based on the type of selector. Inline style takes over all other declarations.

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

In the above example, inline style took precedence over all other declarations, i.e., id, class and element.

CSS Specificity - Specificity Hierarchy (ID declaration)

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

Following example demonstrates the order of specificity based on the type of selector. ID declaration takes over class declaration.

<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 声明优先于其他声明，即类和元素。

In the above example, id declaration took precedence over other declarations, i.e., class and element.

CSS Specificity - Specificity Hierarchy (Class declaration)

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

Following example demonstrates the order of specificity based on the type of selector. Class declaration takes over element 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>

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

In the above example, class declaration took precedence over other declaration, i.e., element.

CSS Specificity - Specificity Hierarchy (With !important Rule)

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

Following example demonstrates that the order of specificity gets irrelevant if a selector is marked as !important. In this example, inspite of an id declaration which takes precedence over all other declarations, the styling of element is applied as it is marked as important.

<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>