CSS选择器的优先级计算规则
CSS选择器优先级是确定当多个规则作用于同一元素时，哪个规则会生效的核心机制。它的计算基于选择器的特定性和权重。
1. 优先级的概念与必要性
当多个CSS声明同时指向同一个HTML元素时，浏览器需要一套规则来决定最终应用哪个样式。这套规则就是“优先级”（Specificity）。优先级高的规则将覆盖优先级低的规则。
2. 优先级权重等级
优先级由四个部分组成的序列来比较，我们可以将其表示为 (a, b, c, d)。比较时，从左到右依次对比，a值高的优先级最高，如果a相同，则比较b，以此类推。这四个部分分别是：
- a：内联样式 - 直接在HTML元素的
style属性中编写的样式。权重最高。 - b：ID选择器的数量 - 选择器中包含的ID选择器（如
#header）的数量。 - c：类选择器、属性选择器、伪类的数量 - 包括类选择器（如
.button）、属性选择器（如[type="text"]）、伪类（如:hover,:nth-child(n)）。 - d：元素选择器、伪元素选择器的数量 - 包括元素（标签）选择器（如
div、p）、伪元素（如::before,::after）。
注意： 通用选择器（*）、组合符（如+, >, ~）和否定伪类（:not()）本身不计入优先级权重，但:not()内部的选择器会计入。
3. 计算步骤与案例
我们通过一个具体的例子来学习如何计算。假设有以下CSS规则和HTML：
/* 规则 1 */
#nav .list li a {
color: red;
}
/* 规则 2 */
body header ul li a.link {
color: blue;
}
/* 规则 3 */
a.link:hover {
color: green;
}
<body>
<header id="nav">
<ul class="list">
<li><a id="home" class="link" href="#" style="color: yellow;">首页</a></li>
</ul>
</header>
</body>
现在，我们要确定<a>标签的颜色。计算每条规则的优先级：
-
规则 1:
#nav .list li a- a (内联样式): 0
- b (ID选择器): 1 (
#nav) - c (类/属性/伪类): 1 (
.list) - d (元素/伪元素): 2 (
li,a) - 优先级为: (0, 1, 1, 2)
-
规则 2:
body header ul li a.link- a: 0
- b: 0
- c: 1 (
.link) - d: 5 (
body,header,ul,li,a) - 优先级为: (0, 0, 1, 5)
-
规则 3:
a.link:hover- a: 0
- b: 0
- c: 2 (
.link,:hover) - d: 1 (
a) - 优先级为: (0, 0, 2, 1)
-
元素上的内联样式
- 在HTML中，元素有
style="color: yellow;"。 - 内联样式的优先级 a 值为 1。
- 优先级为: (1, 0, 0, 0)
- 在HTML中，元素有
4. 优先级比较与结果
现在比较四个优先级数值：
- 规则1: (0, 1, 1, 2)
- 规则2: (0, 0, 1, 5)
- 规则3: (0, 0, 2, 1)
- 内联样式: (1, 0, 0, 0)
比较时，先比较a值。内联样式的a=1，远大于所有其他规则的a=0，因此内联样式的优先级最高。所以，最终链接的颜色是黄色（yellow）。
如果去掉内联样式style="color: yellow;"，再进行比较：
- 规则1: (0, 1, 1, 2)
- 规则2: (0, 0, 1, 5)
- 规则3: (0, 0, 2, 1)
现在比较a值，都为0。接着比较b值，规则1的b=1，大于规则2和规则3的b=0。因此，规则1的优先级最高，链接颜色将变为红色（red）。
5. 重要规则（!important）
这是一个特例。在样式声明后加上!important会获得最高优先级，覆盖所有其他声明（包括内联样式）。但强烈建议谨慎使用，因为它破坏了CSS的级联特性，使得调试和维护变得非常困难。最佳实践是依靠合理的优先级计算来解决问题。
总结：
计算优先级时，牢记权重等级 a > b > c > d。通过将选择器分解为四个部分并计数，你就能准确预测任何样式冲突的结果。