CSS优先级由选择器权重决定，权重越高样式越优先。权重分为四部分：内联样式、ID、类/属性/伪类、标签/伪元素，依次按位比较。例如#header .title权重为0,1,1,0，nav a:hover为0,0,1,2，前者更高。当权重相等时，后写的规则覆盖前面的。!important可打破权重规则，但应慎用以避免维护难题。提升权重可用ID、多类组合、属性选择器或嵌套结构，如.container .sidebar .menu比单一类更特异。正确理解这些规则可减少冲突与!important依赖，写出更清晰的CSS。
在CSS中，选择器的优先级决定了当多个规则作用于同一个元素时，哪一个样式会被应用。理解优先级的关键在于权重计算和覆盖逻辑。只要掌握这两点，就能避免样式冲突、减少!important的滥用。
什么是CSS优先级？
浏览器通过一套评分机制判断哪个CSS规则更“重要”。这个评分就是选择器的权重。权重高的规则会覆盖权重低的规则，即使它写在前面。
比如有这样两个规则：
#header .title { color: blue; }
nav a:hover { color: red; }
如果某个a标签同时匹配这两个选择器，最终颜色取决于它们的权重对比。
立即学习“前端免费学习笔记（深入）”；
权重如何计算？
权重由四部分组成，通常用一个四位数表示：0,0,0,0 —— 从左到右分别是：内联样式、ID、类/属性/伪类、标签/伪元素。
- 内联样式（）：1,0,0,0
- ID选择器（#id）：0,1,0,0
- 类、属性选择器、伪类（.class、[type]、:hover）：0,0,1,0
- 标签、伪元素（div、::before）：0,0,0,1
计算示例：
- #app .list-item:hover → 0,1,2,0（1个ID + 1个类 + 1个伪类）
- div header nav a → 0,0,0,4（4个标签）
- .btn[data-type="submit"] → 0,0,2,0（1个类 + 1个属性选择器）
比较时从左到右逐位对比，高位胜出。例如0,1,0,0 > 0,0,99,99。
!important 的特殊地位
带有!important声明的样式会无视权重规则**，直接提升优先级。但它是双刃剑：
- 适用于快速调试或第三方库覆盖
- 滥用会导致维护困难、样式混乱
建议仅在必要时使用，并尽量通过提高选择器权重来替代。
提升优先级的实用技巧
与其依赖!important，不如学会合理提升选择器权重：
- 用ID代替类选择器（谨慎使用，避免过度特异化）
- 组合多个类：.btn.primary.large 比 .btn 更高权重
- 利用嵌套结构：.container .sidebar .menu 能精准命中目标
- 使用属性选择器或伪类增加细节，如 input[type="text"]:focus
注意：后代选择器数量不影响权重，只有选择器类型才计入。
书写顺序也起作用
当两个选择器权重完全相等时，后写的规则生效。这是层叠（Cascading）的体现。
例如：
.title { color: green; }
.title { color: orange; }
文字会是橙色，因为后者覆盖前者。
基本上就这些。掌握权重计算，多用类组合少用!important，就能写出清晰可控的CSS。不复杂但容易忽略细节。
