CSS 特异性
什么是特异性？
如果有两个或多个 CSS 规则指向同一个元素，则特异性值最高的选择器将“获胜”，并且其样式声明将应用于该 HTML 元素。
将特殊性视为决定最终应用于元素的样式声明的分数/等级。
请看以下示例：
示例 1
在此示例中，我们使用了“p”元素作为选择器，并为该元素指定了红色。文本将为红色：
<html>
<head>
<style>
p{颜色：红色；}
</style>
</head>
<body>
<p>你好世界！</p>
</body>
</html>
亲自尝试 »
现在，看一下示例 2：
示例 2
在此示例中，我们添加了一个类选择器（名为“test”），并为该类指定了绿色。文本现在将为绿色（尽管我们已为元素选择器“p”指定了红色）。这是因为类选择器具有更高的优先级：
<html>
<head>
<style>
.测试 {颜色：绿色;}
p{颜色：红色；}
</style>
</head>
<body>
<p class="test">你好世界！</p>
</body>
</html>
亲自尝试 »
现在，看一下示例 3：
示例 3
在此示例中，我们添加了 id 选择器（名为“demo”）。文本现在将变为蓝色，因为 id 选择器具有更高的优先级：
<html>
<head>
<style>
#demo {颜色：蓝色；}
.测试 {颜色：绿色;}
p{颜色：红色；}
</style>
</head>
<body>
<p id="demo" class="test">你好世界！</p>
</body>
</html>
亲自尝试 »
现在，看一下示例 4：
示例 4
在此示例中，我们为“p”元素添加了内联样式。文本现在将变为粉红色，因为内联样式具有最高优先级：
<html>
<head>
<style>
#demo {颜色：蓝色；}
.测试 {颜色：绿色;}
p{颜色：红色；}
</style>
</head>
<body>
<p id="demo" class="test" style="color: pink;">你好世界！</p>
</body>
</html>
亲自尝试 »
特异性层次结构
每个 CSS 选择器在特异性层次结构中都有其位置。
有四个类别定义选择器的特异性级别：
- 内联样式 - 例子：<h1 style="color: pink;">
- ID - 例如：#navbar
- 类、伪类、属性选择器 - 例如：.test，:hover，[href]
- 元素和伪元素 - 例如：h1, :before
如何计算特异性？
记住如何计算特异性！
从 0 开始，每个 ID 值加 100，每个类值（或伪类或属性选择器）加 10，每个元素选择器或伪元素加 1。
笔记： 内联样式的特殊性值为 1000，并且始终享有最高优先级！
笔记2： 这条规则有一个例外：如果你使用!important 规则，它甚至会覆盖内联样式！
下表显示了如何计算特异性值的一些示例：
| 选择器 | 特异性值 | 计算 |
|---|---|---|
| 页 | 1 | 1 |
| p 测试 | 11 | 1 + 10 |
| p#演示 | 101 | 1 + 100 |
| <p style="color: pink;"> | 1000 | 1000 |
| #演示 | 100 | 100 |
| 。测试 | 10 | 10 |
| p.测试1.测试2 | 21 | 1 + 10 + 10 |
| #navbar p#演示 | 201 | 100 + 1 + 100 |
| * | 0 | 0（通用选择器被忽略） |
特异性值最高的选择器将获胜并生效！
考虑以下三个代码片段：
例子
答：h1
B：h1#内容
C：<h1 id="content" style="color: pink;"> 标题</h1>
A 的特异性为 1（一个元素选择器）
B 的特异性为 101 （一个 ID 引用 + 一个元素选择器）
C 的特异性为 1000（内联样式）
由于第三条规则（C）具有最高特异性值（1000），因此将应用该样式声明。
更多特异性规则示例
同等特殊性：最新规则胜出 - 如果相同的规则在外部样式表中写入两次，则最新的规则有效：
ID 选择器比属性选择器有更高的特异性 - 看一下以下三行代码：
第一条规则比其他两条规则更具体，因此将被应用。
上下文选择器比单个元素选择器更具体 - 嵌入的样式表更接近要设置样式的元素。因此，在以下情况下
例子
来自外部 CSS 文件：
#content h1 {背景颜色：红色；}
在 HTML 文件中：
<style>
#content h1 {背景颜色：黄色；}
</style>
将适用后一条规则。
类选择器胜过任意数量的元素选择器 - 类选择器（例如 .intro 优于 h1、p、div 等）：
通用选择器 (*) 和继承值的特异性为 0 - 通用选择器（*）和继承的值被忽略！
