答案：CSS样式覆盖由重要性、优先级和源顺序决定，!important权重最高，选择器优先级按四元组计算，同优先级后引入的样式生效，推荐合理组织引入顺序与命名规范以避免冲突。
当多个CSS规则作用于同一个元素时，浏览器需要决定应用哪条样式。这个过程依赖于优先级（Specificity）、源顺序（Source Order）和层叠规则（Cascading）。理解这些机制对掌握样式覆盖至关重要。
一、CSS层叠的三大决定因素
CSS的“C”代表层叠（Cascading），意味着样式可以叠加并按规则覆盖。最终生效的样式由以下三个因素共同决定：
- 重要性（Importance）：带有 !important 的声明具有最高权重（应谨慎使用）
- 优先级（Specificity）：选择器越具体，优先级越高
- 源顺序（Source Order）：相同优先级下，后定义的样式覆盖前面的
二、引入顺序如何影响样式覆盖
CSS文件或样式块的引入顺序直接影响源顺序，从而改变最终渲染效果。
例如，有以下两个样式文件：
立即学习“前端免费学习笔记（深入）”；
.box { background: red; }.box { background: blue; }
如果HTML中这样引入：
<link rel="stylesheet" href="style1.css"> <link rel="stylesheet" href="style2.css">则 .box 的背景色为蓝色，因为 style2.css 在后，同优先级下后定义的覆盖前面的。
反过来引入顺序：
<link rel="stylesheet" href="style2.css"> <link rel="stylesheet" href="style1.css">此时背景色变为红色。
三、优先级计算规则详解
当选择器复杂度不同时，优先级起主导作用。优先级按四元组 (a, b, c, d) 计算：
- a：内联样式（如 ）→ 权重 1000
- b：ID 选择器数量 → 每个 +100
- c：类、属性、伪类选择器数量 → 每个 +10
- d：标签、伪元素选择器数量 → 每个 +1
例如：
#header .nav li.active → (0,1,2,1) = 121 ul.menu > li:hover → (0,0,2,2) = 22前者优先级更高，即使后引入也不会被后者覆盖。
四、实际开发中的建议
为避免样式混乱，推荐以下实践：
- 统一CSS引入顺序，如：重置样式 → 公共组件 → 页面专属 → 第三方库
- 避免滥用 !important，它会破坏层叠逻辑
- 使用BEM等命名规范降低选择器复杂度，减少优先级冲突
- 调试时使用浏览器开发者工具查看具体哪条规则生效及原因
基本上就这些。掌握引入顺序与优先级的关系，能更可控地管理样式表现。
