CSS 特定性
什么是特定性？
如果有两个或多个 CSS 规则指向同一个元素，特定性值最高的选择器将“获胜”，其样式声明将应用于该 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, ::before
如何计算特定性？
记住如何计算特定性！
从 0 开始，每个 ID 值加 100，每个类值加 10（或伪类或属性选择器），每个元素选择器或伪元素加 1。
注意：内联样式的特定性值为 1000，始终被赋予最高优先级！
注意 2：这个规则有一个例外：如果您使用 !important 规则，它甚至会覆盖内联样式！
下表展示了一些计算特异性值的示例。
| 选择器 | 特异性值 | 计算 |
|---|---|---|
| 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（通用选择器被忽略） |
特异性值最高的选择器将获胜并生效！
考虑以下三个代码片段
示例
A: h1
B: h1#content
C: <h1 id="content" style="color: pink;">Heading</h1>
A 的特异性为 1（一个元素选择器）。
B 的特异性为 101（一个 ID 引用 + 一个元素选择器）。
C 的特异性为 1000（内联样式）。
由于第三条规则 (C) 的特异性值最高 (1000)，因此将应用此样式声明。
更多特异性规则示例
特异性相等：最新的规则获胜 - 如果相同的规则在外部样式表中写了两次，那么最新的规则获胜。
ID 选择器比属性选择器具有更高的特异性 - 看一下以下三行代码。
示例
div#a {background-color: green;}
#a {background-color: yellow;}
div[id=a] {background-color: blue;}
第一条规则比其他两条规则更具体，因此将被应用。
上下文选择器比单个元素选择器更具体 - 嵌入式样式表更靠近要设置样式的元素。所以在以下情况下。
示例
/*来自外部 CSS 文件：*/
#content h1 {background-color: red;}
/*在 HTML 文件中：*/
<style>
#content h1 {background-color: yellow;}
</style>
将应用后一条规则。
类选择器胜过任何数量的元素选择器 - 类选择器（如 .intro）胜过 h1、p、div 等。
通用选择器 (*) 和继承的值的特异性为 0 - 通用选择器 (*) 和继承的值被忽略！
