:link仅作用于带href且未访问的元素，可设颜色、下划线等样式，但无法用content添加文字；加“new”角标需配合::after伪元素与定位，且必须按lvha顺序书写以避免覆盖。
怎么用 :link 给未访问过的链接加视觉标记
:link 只匹配带有 href 属性且**尚未被用户访问过**的 <a></a> 元素。它不是“所有链接”的通用选择器，也不作用于无 href 的 <a></a>（比如 <a name="top"></a>），更不会覆盖已访问过的链接——那得靠 :visited。
常见错误是写成 a:link 却期望它影响所有链接，结果发现部分链接没反应：要么没 href，要么已被点击过，要么被后续更具体的规则（比如 a:hover）覆盖了。
- 必须确保链接有合法的
href值（哪怕只是href="#"） -
:link和:visited不能同时生效；浏览器按访问状态二选一 - 如果想统一加标记（比如角标、小图标），建议用类名控制，
:link仅用于纯状态区分
给未访问链接加小角标（如 “new”）的可行方案
纯 CSS 无法在 :link 上插入文字内容（content 在 :link 中被忽略），但可以用伪元素 + 背景图或 Unicode 符号模拟标记。关键在于：只对未访问链接生效，且不干扰正常交互。
示例：在链接右侧加一个浅蓝底白字的 “NEW” 角标
a:link {
position: relative;
}
a:link::after {
content: "NEW";
font-size: 0.65em;
color: white;
background: #007bff;
padding: 1px 5px;
border-radius: 3px;
position: absolute;
top: -6px;
right: -20px;
}
- 必须设
position: relative在父a上，否则::after会相对于最近定位祖先定位 -
::after在:link下才渲染，访问后自动消失（因为:visited不匹配该规则） - 避免用
display: inline-block或宽高约束::after，否则可能撑开行高或遮挡文字
:link 和 :visited 的声明顺序为什么不能错
CSS 里 :link、:visited、:hover、:active 的书写顺序直接影响样式是否生效——这是由“层叠优先级”和浏览器内部状态切换逻辑决定的，不是单纯看代码位置。
正确顺序只能是：:link → :visited → :hover → :active（LVHA）。如果把 :visited 写在 :link 前面，那么所有链接（包括未访问的）都会先套用 :visited 样式，再被 :link 覆盖——但浏览器出于隐私限制，会主动忽略 :visited 中某些属性（如 color、background），导致样式不可控。
- 哪怕你只想改未访问链接的颜色，也得把
a:link { color: blue; }放在a:visited { color: purple; }前面 - 现代浏览器对
:visited的样式限制越来越严（比如不能读取getComputedStyle），所以依赖它做复杂标记已不现实 - 若需精确控制“首次展示”，服务端或 JS 标记
data-first-view="true"更可靠
为什么不用 :link 做“新链接”提示反而更稳妥
用户刷新页面、清空历史、或使用隐私模式时，:link 状态会重置，导致“NEW”标记反复出现或突然消失。它反映的是浏览器本地访问记录，不是业务意义上的“新内容”。
真正需要标记“新”的场景（比如后台推送的新文章链接），应该由后端注入 class 或 data 属性，例如：
<a href="/post/123" class="link-new">刚发布的文章</a>
再用 CSS 控制：
a.link-new::after {
content: "NEW";
/* 同上 */
}
-
:link是浏览器状态，.link-new是业务状态，二者语义不同，混用容易误导维护者 - 移动端 WebView、PWA 或 Electron 应用里，
:link行为可能因缓存策略异常，class 方案更可控 - 如果真要用
:link，只建议用于低风险视觉降级（如轻微颜色变化），别依赖它承载关键信息
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
