引言
CSS（层叠样式表）中的"层叠"（Cascade）是其最核心的特性之一，它决定了当多个样式规则应用于同一个元素时，浏览器应该如何解决这些冲突。本文将深入探讨CSS层叠机制的工作原理，帮助开发者更好地掌控样式应用。
什么是层叠？
在CSS中，"声明冲突"指的是当不同的样式规则应用于同一个HTML元素时产生的冲突。而"层叠"就是浏览器用来解决这些冲突的过程，主要通过权重计算来自动处理。
层叠的解决步骤
浏览器解决样式冲突遵循三个关键步骤：
1. 比较重要性
样式的重要性从高到低分为：
- 作者样式表中的!important样式（虽然有效但不建议过度使用）
- 作者样式表中的普通样式（开发者编写的常规样式）
- 浏览器默认样式表（各浏览器自带的基准样式）
当重要性比较后仍有冲突，浏览器会进入下一步比较。
2. 比较特殊性（Specificity）
特殊性是CSS选择器的权重值，总体规则是：选择器选中的范围越窄，其特殊性越高。
具体计算规则是通过四位数（x x x x）来表示，各位数字分开计算且不进位：
- 千位：如果是内联样式（直接在HTML元素上使用style属性），记为1，否则为0
- 百位：等于选择器中所有ID选择器的数量
- 十位：等于选择器中所有类选择器、伪类选择器、属性选择器的数量
- 个位：等于选择器中所有元素选择器、伪元素选择器的数量
示例计算：
#header .nav li.active {} /* 特殊性：0-1-2-1 */
div#main .item a:hover {} /* 特殊性：0-1-2-2 */
body .content p {} /* 特殊性：0-0-1-2 */
3. 比较源次序
当两个规则的重要性与特殊性完全相同时，后来者居上——后定义的样式会覆盖前面的样式。
实际应用技巧
1. 重置样式表
由于浏览器默认样式可能不一致，开发者通常会先引入重置样式表（Reset CSS）来覆盖浏览器默认样式，然后再编写自己的样式来覆盖重置样式。
常用的重置样式表：
- Eric Meyer的重置样式表
- Normalize.css（一种更温和的替代方案）
2. 爱恨法则（LoVe/HAte）
对于链接状态样式的定义顺序，有一个记忆口诀"爱恨法则"（LoVe/HAte），确保正确的覆盖顺序：
a:link {} /* 未访问链接 */
a:visited {} /* 已访问链接 */
a:hover {} /* 鼠标悬停 */
a:active {} /* 点击瞬间 */
这个顺序之所以重要，正是因为层叠机制中"源次序"的影响——后定义的样式会覆盖前面的样式。
最佳实践建议
- 谨慎使用!important：它虽然能快速解决问题，但会破坏层叠的自然流程，导致后续维护困难
- 保持选择器简洁：避免过度复杂的选择器，它们会增加特殊性计算复杂度
- 利用层叠而非覆盖：理解并善用层叠机制，而不是一味地通过增加特殊性来解决问题
- 使用CSS方法论：如BEM等命名约定，可以减少对特殊性的依赖
理解CSS层叠机制是成为前端高手的关键一步。通过掌握重要性、特殊性和源次序这三个核心概念，开发者可以更精准地控制样式应用，写出更可维护的CSS代码。
