style="color: red;" 失效主因是引号缺失、中文标点、拼写错误（如colour）、父级!important覆盖，或容器高优先级color声明；且仅作用于默认态，无法控制:hover/:visited状态。
只改一个链接颜色，style="color: red;" 为什么有时不生效
它确实能快速起效，但失效原因很具体：漏引号、用了中文冒号或分号、拼错 color（比如写成 colour），或者父级元素设置了 color 且带 !important。更隐蔽的是，如果链接嵌在 <span> 或 <div> 里，而该容器本身有更高优先级的 color 声明，内联样式也会被覆盖。
要点：
-
style只影响默认状态（即未访问、未悬停），:hover和:visited完全不受控 - 不要用已废弃的
<font>标签套链接——HTML5 不认，且同样无法控制交互态 - 颜色值支持英文名（
red）、十六进制（#007bff）、RGB（rgb(0, 123, 255)），但不支持 HSL 写法在旧版 IE 中回退
a:link、a:visited、a:hover、a:active 的顺序不能乱
CSS 层叠规则决定了它们必须按 LVHA（Link → Visited → Hover → Active）顺序书写，否则 :visited 可能拦截 :hover 效果——尤其当两者颜色相同或都用了 !important 时，鼠标移上去毫无反应。
常见错误现象：
立即学习“前端免费学习笔记（深入）”；
- 写了
a:hover { color: orange; }却没反应 → 检查是否a:visited在它前面且没设color，导致浏览器沿用紫色默认值并“锁死”了 hover 变色逻辑 -
a:active看不到效果 → 大多因为点击时间太短，或被其他样式（如outline、transition）干扰，建议加outline: none;排除干扰 - 现代浏览器对
:visited有安全限制：只能改color、background-color、border-color等少数属性，font-size、display、transform全部被忽略
统一改全站链接颜色，别用 <style> 硬塞进每个 HTML 文件
多个页面共用一套链接样式时，硬编码 <style> 块到每个 <head> 里，等于埋下维护雷：改一处，漏十处。正确做法是抽离为外部 CSS 文件，用 <link rel="stylesheet" href="styles.css"> 引入。
最小可行配置示例（styles.css）：
a:link { color: #007bff; text-decoration: none; }
a:visited { color: #6c757d; }
a:hover { color: #0056b3; text-decoration: underline; }
a:active { color: #004085; }
注意点：
- 别只写
a { color: ...; }—— 这会同时覆盖:link和:visited，失去已访问状态的视觉区分，影响可用性 - 如果站点有深色背景，务必检查对比度：WCAG 要求文字与背景对比度 ≥ 4.5:1，
#6c757d在黑底上就不可读 - 路径要写对：
href="styles.css"是相对当前 HTML 文件的路径，不是相对于 CSS 文件自身
局部定制链接颜色，比如导航栏或页脚，用类选择器比全局重写更安全
想让导航栏链接是白色、页脚链接是灰色，又不想影响正文链接？直接给容器加 class，再用后代选择器限定范围，比在全局规则里堆 !important 干净得多。
例如：
.nav a:link { color: white; }
.nav a:visited { color: #ddd; }
.nav a:hover { color: #ffcc00; }
.footer a:link { color: #666; }
.footer a:visited { color: #999; }
.footer a:hover { color: #333; }
这样做的好处：
- 避免规则冲突：不用和全局
a:link抢优先级，也不用靠!important强行覆盖 - 语义清晰：
.nav a明确表达了“导航区域内的所有链接”，比一堆零散的 ID 更易理解 - 可组合扩展：比如
.nav .dropdown a:hover可单独控制下拉菜单悬停色，不影响主菜单
真正容易被忽略的是：伪类必须跟在元素选择器后面，.nav:hover a 和 .nav a:hover 完全是两回事——前者是鼠标悬停在导航容器上才触发，后者才是悬停在链接本身上变色。
