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;
}
详细计算过程
#outer a→ 1个ID选择器 + 1个元素选择器 = 1-0-1#outer #inner a→ 2个ID选择器 + 1个元素选择器 = 2-0-1#outer div ul li a→ 1个ID选择器 + 4个元素选择器 = 1-0-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 值。
复合选择器
/* 优先级：0-3-3 */
div div .nav:nth-child(2) a:hover {
border: 10px double black;
}
包含2个元素选择器 + 1个类选择器 + 1个伪类 + 1个元素选择器 + 1个伪类 = 0-3-3
四、优先级比较原则
- 首先比较 a 值，a 大的优先级高
- a 相同时比较b 值，b 大的优先级高
- b 相同时比较 c 值，c 大的优先级高
五、实际应用建议
1. 避免过度使用ID选择器
虽然ID选择器优先级高，但过度使用会降低样式的灵活性。
2. 合理使用类选择器
类选择器提供良好的平衡，既有较高的优先级，又具有良好的复用性。
3. 善用 !important
!important 可以覆盖优先级规则，但应谨慎使用，避免破坏样式的可维护性。
4. 利用就近原则
当优先级相同时，后定义的样式会覆盖先定义的样式。
掌握CSS优先级规则是前端开发的基础技能。通过合理使用选择器和理解层叠机制，我们可以构建更加稳定和可维护的样式系统。在实际开发中，建议采用语义化的类名，避免过度依赖高优先级选择器，以提高代码的可读性和可维护性。
