CSS 优先级
了解 CSS 优先级及其规则。
在这里，我们将介绍 CSS 选择器最常见的使用场景，并深入理解 CSS 优先级（specificity）。
我们首先从优先级开始。
CSS 优先级简介
CSS 优先级 是浏览器在遇到模糊语法时，决定应用哪些 CSS 声明的一种机制。
换句话说，当页面上同一个元素存在多个 CSS 声明时，优先级是浏览器用来决定采用哪种样式的方式。
以下是对应的 HTML、CSS 代码及渲染结果：
No configuration found for ID: 9d8d8f9463b018b1a676756dbba5908723b85438fa4c3a16d4676c2e30a84b96
如上所示，我们有一个 <h1> 标签，接着是一个普通的 <div>，然后是带有 someClass 类属性的另一个 <div>。接下来是一个带有 someId ID 属性的 <div>，最后是类似的结构，但这次被包裹在 <section> 元素中。
我们还将选择器文本直接显示在页面上，以便更直观地理解哪个选择器影响了某个元素，而无需查阅代码。
现在，让我们分析浏览器是如何生成上述页面渲染结果的。
CSS 优先级规则
观察上面的代码及其在浏览器中的表现，我们可以看到以下规则正在生效：
- 通配符选择器（
*）会在没有其他选择器适用时生效。在本例中，font-family属性未被其他选择器覆盖，因此由通配符选择器应用。 - 元素选择器会作用于没有类或 ID 属性的元素（表现为
div {...}选择器下的红色文字）。 - 类选择器会覆盖元素选择器（表现为
div.someClass选择器下的蓝色文字）。 - ID 选择器会覆盖类选择器（表现为
div#someId选择器下的绿色文字）。 - 在样式中添加
!important标志将覆盖所有其他样式，因此可以认为!important的优先级最高。
选择器与权重
为了更好地理解浏览器如何为每个选择器分配权重，我们可以为每种选择器赋予一个“权重”值。
| 选择器 | 权重 |
|---|---|
| 通配符选择器 | 0-0-0 |
| 元素选择器 | 0-0-1 |
元素选择器（如 section div 这样的复合选择器） | 0-0-2 |
| 类选择器 | 0-1-0 |
| ID 选择器 | 1-0-0 |
内联 style HTML 属性 | 1-0-0-0 |
!important 标志 | 1-0-0-0-0-0 |
代码示例
1h1.firstClass.secondClass { 2 color: tomato; 3}
其优先级计算如下：
h1== 0-0-1.firstClass== 0-1-0.secondClass== 0-1-0
总优先级得分为 0-2-1，即 21。
我们的第二个示例是一个 ID 选择器与嵌套类选择器的组合：
1#title.anotherClass { 2 color: plum; 3}
该 CSS 声明的优先级计算如下：
#title== 1-0-0.anotherClass== 0-1-0
两者结合后，总优先级得分为 1-1-0，即 110。
在掌握了 CSS 优先级的基本概念后，我们还需要了解可用的不同类型的选择器。
选择器种类繁多！
为了保持实用性，我们将遵循 80-20 法则：只讲解占所有布局使用量 80% 以上所用到的 20% 的核心选择器。
毕竟，本章讨论的是 CSS 基础知识，此时还不适合深入探讨复杂示例，例如：
1*+* { 2 /* 上述选择器被称为“无脑猫头鹰”选择器 */ 3}
我们将仅聚焦于最实用的 CSS 选择器，帮助你快速掌握并具备构建布局的能力。