.navbar a 被覆盖是因为特异性不足或 scoped 样式隔离；应查清生效规则后针对性提权，优先用属性选择器、伪类或深度选择器，避免滥用 !important。
为什么 .navbar a 被全局 a 样式覆盖
你写了 .navbar a { color: #000; }，但导航链接还是浅灰色——不是代码没生效，而是浏览器根本没选中它。打开开发者工具看「Computed」面板，大概率发现生效的是 a { color: #F4EEE0; } 这条规则。它的权重是 (0,0,1,0)，而你的 .navbar a 是 (0,0,1,1)，看似高一级，但若页面里还有 .nav-link 或 header a 这类 (0,0,2,0) 或 (0,0,1,1) 的同级规则，胜负就悬了。
怎么用最小改动赢过现有规则
别堆 class、别加 ID，先查清对手是谁。在「Styles」面板里点开被划掉的那条 .navbar a，看它上面那条生效规则的选择器是什么。然后针对性加一层：
- 对手是
a→ 改用.navbar > a或.navbar a:not([href^="javascript"]) - 对手是
.nav-link→ 改用.navbar .nav-link（权重从 0,0,1,0 升到 0,0,2,0） - 对手是
header a→ 改用header .navbar a或.navbar[data-section="top"] a
属性选择器（如 [data-nav]）和伪类（如 :is(a)）天然提权且不破坏语义，比硬加 .navbar-navbar-nav-link 更干净。
Vue/React 项目里 scoped 样式为啥不生效
你在 <style scoped> 里写 .navbar a，但浏览器实际匹配的是 .navbar[data-v-f3f5f1] a[data-v-f3f5f1]，而框架注入的 .navbar a 规则压根没这个哈希后缀——两边根本不在一个选择器空间里。结果就是你的样式“写了等于没写”。
立即学习“前端免费学习笔记（深入）”；
解决办法只有两个：
- 把要覆盖的样式挪到非 scoped 的
<style>块，或单独引入 CSS 文件，并确保它在 HTML 中排在框架样式表之后 - 必须留在 scoped 内？用深度选择器：
.my-nav :deep(.navbar a) { color: #000; }（Vue 3）或.my-nav >>> .navbar a（Vue 2）
加 !important 是不是更省事
临时救急可以，但会埋坑。比如你给 .navbar a 加了 !important，后面想用 .navbar a:hover 改颜色，就得也加 !important，再后来加暗色模式，又得重复一遍。而且一旦第三方组件也滥用 !important，你就彻底失去控制权。
真正可靠的解法是让选择器本身赢：用 body .app-header .navbar a 替代 .navbar a，权重从 (0,0,1,1) 拉到 (0,0,3,1)，既可调试、又不污染、还能被后续规则自然覆盖。
特异性不是越长越好，关键是在开发者工具里一眼看出谁压倒了谁——那个被划掉的样式，就是你下一行该抄的靶子。
