CSS - 特异性

上一页
下一页

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

CSS 特异性 - 选择器权重类别

任何选择器的特异性都是根据给定的权重计算的。有四个不同的类别，大致定义了任何选择器的特异性水平。这些类别是：

内联样式

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


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

同上

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 特异性 - 每种选择器类型的分数

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

  • No value：通用选择器（*）、：where（）伪类、组合器（+、>、~、_、||）、嵌套组合器（&）没有特异性，得0分。
  • Element / Pseudo-element selector：它获得 1 分的特异性。
  • Class, pseudo-class, or attribute selector：它获得 10 个特异性点。
  • Id selector：它获得 100 分的特异性。
  • Inline style attribute：获得 1000 分的特异性。
  • !important rule：规则获得 10000 个特异性点。如果将 ！important 规则应用于任何 CSS 属性，则它优先于所有其他属性。

CSS 特异性 - 异常情况

伪类，如 matches-any ：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、类、伪类或属性选择器，可以提高特异性，同时易于控制特定部分。
  • 使一组样式优先于另一组样式是使用级联图层。例如，当来自不同层的两个选择器匹配同一元素时，原点和重要性优先。在丢失的样式表中，该选择器的特殊性变得无关紧要。

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 Specificity - Specificity Hierarchy （内联样式）

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


<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 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 声明优先于其他声明，即 class 和 element。

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 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>
打印本页
上一页
下一页