CSS 优先级详解：理解选择器权重和层叠规则

Hi，我是前端人类学（之前叫布兰妮甜）！
CSS（层叠样式表）中的层叠特性决定了当多个样式规则应用于同一元素时，哪个规则会最终生效。理解CSS优先级机制对于前端开发者来说至关重要，它能帮助我们更好地控制样式，避免样式冲突和意外覆盖。

---

---

一、CSS 优先级计算规则

CSS优先级采用三元组 (a, b, c) 的计算方式：

• a：ID选择器的数量
• b：类选择器、属性选择器和伪类的数量
• c：元素选择器和伪元素的数量

优先级比较按从左到右的顺序进行，数值高的优先级更高。

二、实例分析

让我们通过一个具体示例来理解优先级计算：

/* 1. 优先级：1-0-1 */
#outer a {background-color: red;
}/* 2. 优先级：2-0-1 */
#outer #inner a {background-color: blue;
}/* 3. 优先级：1-0-4 */
#outer div ul li a {color: yellow;
}/* 4. 优先级：1-1-3 */
#outer div ul .nav a {color: white;
}

详细计算过程

1. #outer a → 1个ID选择器 + 1个元素选择器 = 1-0-1
2. #outer #inner a → 2个ID选择器 + 1个元素选择器 = 2-0-1
3. #outer div ul li a → 1个ID选择器 + 4个元素选择器 = 1-0-4
4. #outer div ul .nav a → 1个ID选择器 + 1个类选择器 + 3个元素选择器 = 1-1-3

三、特殊选择器优先级

伪类选择器

/* 优先级：0-2-4 */
div div li:nth-child(2) a:hover {border: 10px solid black;
}/* 优先级：0-2-3 */
div li:nth-child(2) a:hover {border: 10px dashed black;
}

:nth-child() 和 :hover 都属于伪类，计入 [b](javascript:void(0)) 值。

复合选择器

/* 优先级：0-3-3 */
div div .nav:nth-child(2) a:hover {border: 10px double black;
}

包含2个元素选择器 + 1个类选择器 + 1个伪类 + 1个元素选择器 + 1个伪类 = 0-3-3

四、优先级比较原则

1. 首先比较 a 值，a 大的优先级高
2. a 相同时比较b 值，b 大的优先级高
3. b 相同时比较 c 值，c 大的优先级高

五、实际应用建议

1. 避免过度使用ID选择器

虽然ID选择器优先级高，但过度使用会降低样式的灵活性。

2. 合理使用类选择器

类选择器提供良好的平衡，既有较高的优先级，又具有良好的复用性。

3. 善用 !important

!important 可以覆盖优先级规则，但应谨慎使用，避免破坏样式的可维护性。

4. 利用就近原则

当优先级相同时，后定义的样式会覆盖先定义的样式。

---

掌握CSS优先级规则是前端开发的基础技能。通过合理使用选择器和理解层叠机制，我们可以构建更加稳定和可维护的样式系统。在实际开发中，建议采用语义化的类名，避免过度依赖高优先级选择器，以提高代码的可读性和可维护性。