:visited 必须写在 :hover 前面以避免层叠覆盖，因两者可同时成立，后声明样式会覆盖前者；LoVeHAte 是为解决状态叠加冲突的推荐顺序，非强制语法。
为什么 :visited 必须写在 :hover 前面？
因为浏览器按声明顺序匹配伪类，:visited 和 :hover 可能同时成立（比如鼠标悬停在一个已访问过的链接上），后声明的样式会覆盖先声明的。如果把 :hover 写在前面、:visited 写在后面，悬停时反而会“退回到”已访问样式，失去悬停效果。
LoVeHAte 是记忆口诀，不是强制语法——它对应的是 :link、:visited、:hover、:active 的推荐书写顺序，本质是解决状态叠加时的层叠冲突。
-
:link和:visited互斥（一个链接要么未访问，要么已访问） -
:hover和:active可与前两者共存，但优先级更高，需后置才能生效 - 现代 CSS 支持
:is()或单独声明，但老项目或复用规则时仍依赖顺序
Chrome/Firefox 对 :visited 的限制导致样式“不生效”
出于隐私保护，主流浏览器从多年前就禁止通过 :visited 读取或影响大部分样式属性。你只能安全设置：color、background-color、border-color（及各方向变体）、outline-color、column-rule-color。其他如 font-size、display、visibility、transform 等一律被忽略，且不会报错。
- 试图用
:visited { opacity: 0.7; }—— 无效，但控制台无提示 -
:visited { color: purple; border-bottom: 2px solid purple; }—— 安全有效 - 不要指望靠
:visited触发动画或改变布局，浏览器直接静默丢弃
如何给 :focus 和 :active 正确排序？
:focus 不在 LoVeHAte 里，但它常和 :hover、:active 并存。键盘聚焦和鼠标点击可能触发不同组合：比如 Tab 聚焦后悬停 → :focus:hover；点击瞬间 → :active。它们的合理顺序是：:link / :visited → :hover → :focus → :active。
立即学习“前端免费学习笔记（深入）”；
-
:focus应在:hover之后，否则悬停时可能被聚焦样式干扰（尤其当两者样式相近） -
:active必须放在最后，确保点击瞬间的样式不被前面的:hover或:focus覆盖 - 实际常用组合：
a:link、a:visited、a:hover、a:focus、a:active—— 一行写完也行，但必须按此顺序
伪类链式写法（如 :hover:active）是否可靠？
不可靠。CSS 规范不支持这种“同时满足两个交互态”的写法。:hover:active 在绝大多数浏览器中不会匹配任何状态——因为鼠标悬停时点击，:hover 仍成立，但 :active 是瞬时态，两者严格意义上的“同时存在”窗口极短，且渲染引擎不保证捕获该交集。
- 正确做法是分别声明：
a:hover、a:active，让它们各自响应 - 需要更精细控制时，改用 JavaScript 监听
mousedown/mouseup，加 class 控制 - 像
:is(:hover, :focus)这种逻辑或写法是可行的，但:hover:active是逻辑与，别信
真正容易被忽略的，是 :visited 的能力边界——它看起来是个样式规则，实则是个被浏览器层层设防的“残缺伪类”。别在上面押注交互逻辑，也别为它写 fallback，它就只配改个颜色。
