CSS样式覆盖由选择器特异性（specificity）和加载顺序共同决定，而非简单“后写生效”；特异性值如0,1,1,1越大优先级越高，行内样式权重最高，!important慎用，推荐通过更精准选择器提升权重。
样式被覆盖，核心是CSS优先级（specificity）和加载顺序在起作用。不是简单“谁写在后面谁生效”，而是浏览器按规则逐条比对选择器权重后决定最终样式。
检查选择器的特异性（Specificity）
CSS不是按文件先后，而是按选择器“有多具体”来判断谁赢。比如：
-
.header .nav a（类+类+标签）比a（纯标签）权重大得多 -
#menu li.active（ID+标签+类）通常压倒.nav-list li（类+标签） - 行内样式
style="color: red"权重最高，外部CSS很难覆盖它（除非用!important）
可用浏览器开发者工具（F12 → Elements → 右侧Styles）查看每条样式是否被划掉，以及旁边显示的“specificity值”（如 0,1,1,1），数值越大越优先。
理清link与style的加载与作用范围
引入的是外部CSS文件， 是页面内的样式块。它们都属于“常规样式表”，优先级由以下因素共同决定：
- 同权重下，后加载的样式表会覆盖先加载的（无论link还是style）
- 同一个样式表里，后面定义的规则覆盖前面的（层叠性）
-
写在末尾，通常比早引入的更晚解析，因此更容易“胜出”
注意：把 放在 底部或用 defer 加载JS时动态插入，可能导致样式闪烁或失效，不推荐。
安全可控的覆盖方式
避免滥用 !important，优先用更精准的选择器提升权重：
- 加父容器类名：
.page-main .btn替代单独的.btn - 用属性选择器强化：
button[type="submit"].primary - 必要时用 ID（慎用，破坏可复用性）：
#user-form .input-field - 确认无更高权重的全局样式（如第三方UI库的
!important规则）干扰
调试小技巧
快速定位覆盖源：
- 在开发者工具中点击被划掉的样式，看“origin”来源是哪个文件、哪一行
- 临时禁用某个
标签（右键 → “Disable”），观察样式是否恢复 - 复制被覆盖的选择器，在全局搜索（Ctrl+Shift+F）找所有出现位置
不复杂但容易忽略
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
