CSS 特异性

什么是特异性？

如果有两个或多个 CSS 规则指向同一元素，则具有最高特异性值的选择器将为"win"，并且其样式声明将应用于该 HTML 元素。

将特异性视为决定最终应用于元素的样式声明的分数/等级。

看下面的例子：

示例1

在此示例中，我们使用"p" 元素作为选择器，并为此元素指定红色。文本将为红色：

<html>
<head>
<style>
p {color: red;}
</style>
</head>
<body>

<p>Hello World!</p>

</body>
</html>

亲自试一试 »

现在，看示例 2：

示例2

在此示例中，我们添加了一个类选择器（名为"test"），并为该类指定了绿色。文本现在将为绿色（即使我们为元素选择器 "p" 指定了红色）。这是因为类选择器被赋予了更高的优先级：

<html>
<head>
<style>
.test {color: green;}
p {color: red;}
</style>
</head>
<body>

<p class="test">Hello World!</p>

</body>
</html>

亲自试一试 »

现在，看示例 3：

示例3

在此示例中，我们添加了 id 选择器（名为"demo"）。文本现在将为蓝色，因为 id 选择器被赋予更高的优先级：

<html>
<head>
<style>
    #demo {color: blue;}
    .test {color: green;}
    p {color: red;}
</style>
</head>
<body>

<p id="demo" class="test">Hello World!</p>

</body>
</html>

亲自试一试 »

现在，看示例 4：

示例4

在此示例中，我们为 "p" 元素添加了内联样式。文本现在将是粉红色的，因为内联样式被赋予最高优先级：

<html>
<head>
<style>
    #demo {color: blue;}
    .test {color: green;}
    p {color: red;}
</style>
</head>
<body>

<p id="demo" class="test" style="color: pink;">Hello World!</p>

</body>
</html>

亲自试一试 »

特异性层次

每个 CSS 选择器在特殊性层次结构中都有其位置。

有四个类别定义选择器的特异性级别：

内联样式- 示例：<h1 style="color: pink;">
ID- 示例：#navbar
类、伪类、属性选择器- 示例：.test、:hover、[href]
元素和伪元素- 示例：h1，::之前

如何计算特异性？

记住如何计算特异性！

从 0 开始，为每个 ID 值添加 100，为每个类值（或伪类或属性选择器）添加 10，为每个元素选择器或伪元素添加 1。

笔记：内联样式的特异性值为 1000，并且始终具有最高优先级！

笔记2：此规则有一个例外：如果您使用!important规则，它甚至会覆盖内联样式！

下表显示了有关如何计算特异性值的一些示例：

Selector	Specificity Value	Calculation
p	1	1
p.test	11	1 + 10
p#demo	101	1 + 100
<p style="color: pink;">	1000	1000
#demo	100	100
.test	10	10
p.test1.test2	21	1 + 10 + 10
#navbar p#demo	201	100 + 1 + 100
*	0	0 (the universal selector is ignored)

特异性值最高的选择器将获胜并生效！

考虑这三个代码片段：

示例

A: h1
B: h1#content
C: <h1 id="content" style="color: pink;">Heading</h1>

A 的特异性为 1（一个元素选择器）
B 的特异性为 101（1 个 ID 引用 + 1 个元素选择器）
C 的特异性为 1000（内联样式）

由于第三条规则 (C) 具有最高的特异性值 (1000)，因此将应用此样式声明。

码农教程 - 一技在手,衣食无忧!

CSS 特异性

什么是特异性？

示例1

示例2

示例3

示例4

特异性层次

如何计算特异性？

示例

更多特异性规则示例

示例

示例

示例

示例