必须按link→visited→hover→active顺序写伪类，否则样式覆盖异常；用父级选择器限定作用域可避免全局污染；:visited仅支持有限安全属性，且受浏览器隐私限制。
直接用 a:link、a:visited、a:hover、a:active 这四个伪类，按固定顺序写，就能控制超链接在不同状态下的样式。顺序错或漏掉某个，很容易出现颜色不生效、悬停没反应等问题。
为什么必须按 link → visited → hover → active 的顺序写
CSS 会按声明顺序覆盖同名属性，而浏览器对 a 元素的状态判断有优先级逻辑：:hover 和 :active 是临时态，会叠加在 :link 或 :visited 基础上。如果把 :hover 写在 :link 前面，鼠标悬停时可能仍沿用 :link 的颜色（尤其当两者都设了 color 但没设其他差异时）。
-
a:link只匹配未访问过的链接，一旦点过就失效 -
a:visited只能设置有限样式（如color、background-color），不能设font-size或text-decoration，否则被忽略 -
a:hover必须写在:link和:visited之后，否则可能被覆盖 -
a:active必须紧接:hover后，否则点击瞬间样式不触发
怎么让不同位置的超链接用不同样式
靠父级选择器限定作用域，比如导航栏和正文里的链接要分开控制，不能只靠全局 a。否则改一个地方，全站链接都跟着变。
- 给导航容器加 class：
<nav class="main-nav">@#@#@#@#@#@#@#@#@#@0</nav> - 用后代选择器限定：
.main-nav a:link { color: #2c3e50; }、.main-nav a:hover { color: #e74c3c; } - 正文链接可另起一套：
.article-content a:link { color: #3498db; text-decoration: underline; } - 避免用 ID 做样式锚点（如
#footer a），ID 优先级太高，后期难覆盖
a:visited 为什么经常不生效
不是你写错了，是浏览器故意限制：出于隐私考虑，现代浏览器（Chrome/Firefox/Safari）禁止通过 :visited 读取或影响布局相关属性，比如 font-size、padding、display，甚至部分 color 值也会被降级处理。
- 只允许安全属性：
color、background-color、border-color（不含 width/style）、outline-color - 不能用
transition动画:visited状态，动画会直接跳过 - 测试时别用本地文件（
file://协议），某些浏览器会禁用:visited样式 - 如果想“视觉上区分已访问”，更可靠的方式是服务端记录 + class 控制，而不是依赖
:visited
要不要加 text-decoration: none
加不加取决于设计需求，但要注意：默认下划线是用户识别链接的关键线索，盲目去掉会降低可访问性。
- 如果去掉了，务必用足够强的视觉替代方案：比如明显色差（对比度 ≥ 4.5:1）、hover 时加底色或边框、保持字体粗细/大小差异
-
a:hover里加text-decoration: underline是常见做法，提供即时反馈 - 不要只在
a上设text-decoration: none，而不在:hover恢复——这会让用户无法感知可点击区域 - 内联 SVG 或图标字体链接，建议用
text-decoration: none配合cursor: pointer，避免下划线割裂图形
真正容易被忽略的是 :visited 的能力边界和父级选择器的层级控制——前者让你白调半天颜色也不显示，后者让你改完导航链接，结果文章里的引用链接也变了样。动手前先想清楚“谁该变、谁不该变、浏览器到底允不允许你这么变”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
