CSS伪类使用教程：hover与focus详解

本文深入解析了CSS中两个最常用却常被误解的伪类——:hover与:focus，揭示它们并非“假的类”，而是严格依赖元素真实交互状态的精准选择器：:hover仅在支持指针设备且未禁用交互（如pointer-events:auto）时生效，移动端存在兼容限制；:focus无差别匹配所有焦点来源，而:focus-visible则智能识别键盘导航意图，提升可访问性体验；更关键的是，伪类必须遵循LVHAF顺序书写，否则样式将被意外覆盖，且所有伪类生效的前提是元素本身处于可交互、可聚焦的真实状态——写对样式只是第一步，确保DOM行为与语义一致才是关键。

伪类不是“假的类”，而是 CSS 中用来描述元素特定状态的关键词，:hover、:focus 这些都不是随便加的修饰符，它们有明确的触发条件和 DOM 行为依赖。

什么时候 :hover 才会生效？

很多人写完 a:hover { color: red; } 发现没反应，第一反应是“CSS 没加载”——其实更可能是：当前元素根本不可 hover。比如在移动端无指针设备上，:hover 默认不触发（除非用户主动模拟悬停）；或者元素被 pointer-events: none 禁用了交互。

• :hover 仅对鼠标悬停（或触摸屏模拟悬停）有效，不适用于键盘导航
• 它必须作用于支持交互的元素（如 、），但也能用于
  等非交互元素——只要该元素有 cursor: pointer 或 pointer-events: auto
• 在 iOS Safari 上，:hover 默认延迟触发，且首次点击后才激活整个页面的 hover 样式（这是历史兼容策略）

:focus 和 :focus-visible 怎么选？

• 用 :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

伪类组合顺序为什么重要？

CSS 伪类的书写顺序直接影响样式是否生效，尤其当多个伪类共存时（如 a:hover:focus）。浏览器按“链接 → 访问过 → 悬停 → 激活 → 聚焦”这个逻辑链解析，顺序错乱会导致预期样式被覆盖。

• 标准推荐顺序是 :link → :visited → :hover → :active → :focus（LVHAF）
• 注意 :active 必须在 :hover 之后，否则鼠标悬停时点击不会触发 :active 样式
• :focus 放在最后，避免它提前截断 :hover 的样式继承（例如 a:hover:focus 应该比单独 a:hover 更具体）
• 现代写法可直接用 :is() 简化，如：

  a:is(:hover, :focus) { color: #0056b3; }

真正容易被忽略的是：伪类匹配依赖于元素是否“处于该状态”，而不是是否“能进入该状态”。比如一个 disabled 的 永远不会触发 :focus 或 :hover，哪怕你写了样式也没用——得先确保它可交互、可聚焦、未被屏蔽事件。

理论要掌握，实操不能落！以上关于《CSS伪类使用教程：hover与focus详解》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！

您即将跳转至第三方网站，请注意保护好个人信息和财产安全！

继续访问