伪类是描述元素特定状态的CSS关键词，:hover需元素可交互且支持悬停（如非移动端、pointer-events:auto），:focus匹配所有焦点来源而:focus-visible仅限键盘导航意图，伪类顺序应遵循LVHAF规则以确保样式正确生效。
伪类不是“假的类”，而是 CSS 中用来描述元素特定状态的关键词，:hover、:focus 这些都不是随便加的修饰符，它们有明确的触发条件和 DOM 行为依赖。
什么时候 :hover 才会生效？
很多人写完 a:hover { color: red; } 发现没反应，第一反应是“CSS 没加载”——其实更可能是：当前元素根本不可 hover。比如在移动端无指针设备上，:hover 默认不触发（除非用户主动模拟悬停）；或者元素被 pointer-events: none 禁用了交互。
-
:hover仅对鼠标悬停（或触摸屏模拟悬停）有效，不适用于键盘导航 - 它必须作用于支持交互的元素（如
<a></a>、<button></button>），但也能用于<div> 等非交互元素——只要该元素有 <code>cursor: pointer或pointer-events: auto - 在 iOS Safari 上，
:hover默认延迟触发，且首次点击后才激活整个页面的 hover 样式（这是历史兼容策略） - 用
:focus做全局焦点样式（比如统一加 outline）容易干扰鼠标用户视觉体验 -
:focus-visible目前需配合:focus:not(:focus-visible)回退逻辑，例如：button:focus { outline: 2px solid #007bff; } button:focus:not(:focus-visible) { outline: none; } button:focus-visible { outline: 2px solid #007bff; } - Chrome/Firefox 已原生支持
:focus-visible，Safari 15.4+ 开始支持，旧版 Safari 需用 focus-visible polyfill - 标准推荐顺序是
:link → :visited → :hover → :active → :focus（LVHAF） - 注意
:active必须在:hover之后，否则鼠标悬停时点击不会触发:active样式 -
:focus放在最后，避免它提前截断:hover的样式继承（例如a:hover:focus应该比单独a:hover更具体） - 现代写法可直接用
:is()简化，如：a:is(:hover, :focus) { color: #0056b3; }
:focus 和 :focus-visible 怎么选？
:focus 只要元素获得焦点就匹配，不管来源是鼠标点击、Tab 键切换，还是 JS 调用 .focus()；而 :focus-visible 是现代浏览器中更精准的替代方案，只在用户**明显意图使用键盘导航**时才生效。
伪类组合顺序为什么重要？
CSS 伪类的书写顺序直接影响样式是否生效，尤其当多个伪类共存时（如 a:hover:focus）。浏览器按“链接 → 访问过 → 悬停 → 激活 → 聚焦”这个逻辑链解析，顺序错乱会导致预期样式被覆盖。
立即学习“前端免费学习笔记（深入）”；
真正容易被忽略的是：伪类匹配依赖于元素是否“处于该状态”，而不是是否“能进入该状态”。比如一个 disabled 的 <button></button> 永远不会触发 :focus 或 :hover，哪怕你写了样式也没用——得先确保它可交互、可聚焦、未被屏蔽事件。
