CSS语言的层叠和优先级
CSS中的“层叠”（Cascading）是指当多个规则应用于同一个元素时，确定哪个规则生效的算法。CSS的优先级由选择器的特殊性、重要性（!important声明）、来源和顺序决定。
特异性（Specificity）
特异性是指CSS选择器匹配元素的准确度。特异性高的选择器将覆盖特异性低的选择器。特异性分为四个等级，从高到低：
行内样式（Inline styles）：直接在HTML元素中定义的样式。
ID选择器：例如 #id。
类选择器、属性选择器和伪类选择器：例如 .class、[attribute]、:hover。
标签选择器和伪元素选择器：例如 h1、::before。
重要性（Importance）
使用 !important 声明的样式会覆盖所有其他样式，除非另一个声明也使用了 !important 并且具有相同或更高的特异性。不建议过度使用 !important，因为它会使得样式表的维护变得更加困难。
来源（Source）
如果多个样式表定义了相同的规则，来源也会影响哪个样式生效。一般来说，内联样式 > 内部样式表 > 外部样式表 > 浏览器默认样式。
顺序（Order）
如果特异性、重要性和来源都相同，那么最后出现的规则将覆盖先前的规则。在同一个样式表中，后面的规则会覆盖前面的规则。如果样式来自多个文件，则在链接顺序中最后加载的文件中的规则将生效。
示例
假设我们有以下样式规则：
css
复制
/* 外部样式表 */ h1 { color: blue; } /* 内部样式表 */ h1 { color: green; } /* 行内样式 */ <h1 style="color: red;">Hello</h1>
在这个例子中，<h1> 元素将会是红色，因为行内样式的特异性最高。如果去掉行内样式，<h1> 元素将会是绿色，因为内部样式表的规则会覆盖外部样式表的规则。
理解CSS的层叠和优先级是创建和维护复杂样式表的关键。正确地使用特异性、重要性和顺序可以帮助你控制样式的应用，并避免不必要的冲突。
