直接改标签color不生效，是因为浏览器默认为链接各状态（:link、:visited、:hover、:active）设定了独立样式，必须显式定义全部伪类才能统一控制，漏写任一状态都会回退到ua默认色。
直接改 <a></a> 标签的 color 不生效？原因在这
因为浏览器对超链接有默认的伪类状态样式，单纯给 <a></a> 写 color 只影响未访问过的链接（:link），而点击后变色、悬停变色等行为会被内置规则覆盖。必须显式定义所有相关伪类才能统一控制。
a:link、a:visited、a:hover、a:active 各自管什么
这是 CSS 中控制链接颜色的四个核心伪类，顺序不能乱（LVHA 规则）：
-
a:link：未访问过的链接（纯文本态） -
a:visited：已点击过、存在于浏览器历史中的链接（受隐私限制，color可设，但不能读取或设background/border等） -
a:hover：鼠标悬停时（最常被忽略，不写就回退到默认蓝/紫） -
a:active：鼠标按下瞬间（通常 100ms 内，用于反馈“正在点”）
漏掉任意一个，对应状态下就会用浏览器默认色（比如 Chrome 默认 #0066cc 链接色、#551a8b 已访问色）。
一行代码统一改所有状态？小心 !important 和继承陷阱
可以，但要注意两点：
- 用通配写法：
a { color: #2c3e50 !important; }——!important能压过部分内联样式，但会破坏可维护性，不推荐在组件级使用 - 更稳妥的是批量声明：
a:link, a:visited, a:hover, a:active { color: #2c3e50; } - 如果父容器有
color，且没给a显式设置，部分老浏览器可能继承父色（尤其 IE），所以务必单独写a规则
内联 style、class、外部 CSS 的优先级怎么排？
实际开发中颜色不生效，往往卡在优先级上：
- 内联
style="color:red"> class 中的.nav a:hover> 外部 CSS 文件中的a:hover - 同级选择器按“就近原则”：后面写的覆盖前面写的
- 用浏览器 DevTools 的 Elements 面板点开
<a></a>，看右边 Styles 栏里哪条color被划掉（strikethrough），就能立刻定位冲突来源
真正难调的不是语法，是忘记检查是否被更高优先级的规则压制了——尤其是第三方 UI 库（如 Bootstrap）自带的 a 样式。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
