css 多个按钮中当前项怎么高亮_通过 focus 或 active 伪类处理

P粉602998670 2025-12-29 00:00:00 次阅读

:focus仅对可聚焦元素生效，需确保元素原生可聚焦或设tabindex="0"；:active仅为瞬态按压反馈，无法表示持久“当前项”状态；推荐用aria-current="page"+JS管理+CSS控制实现语义化高亮。

focus 伪类只对可聚焦元素生效，按钮默认可聚焦但需注意 tabindex

原生元素默认支持 :focus，点击或按 Tab 键获得焦点时样式立即生效。但若按钮被包裹在 或用模拟按钮，就无法触发 :focus，除非手动加 tabindex="0"。

常见错误是给非表单元素写 :focus 却没设 tabindex，结果样式完全不生效。



确保目标元素原生可聚焦（、 覆盖所有场景，优先考虑 tabindex

搭配 tabindex="-1" 可隐藏鼠标点击后的焦点环（谨慎使用，确保可访问性）
某些定制组件（如 React 封装的 Button）可能拦截原生 focus 行为，需手动调用 :focus 并确保 ontouchstart 设置正确

CSS 里没有“当前项”的内置概念，所有持久高亮都得靠属性或 class 驱动。focus 和 active 是交互反馈，不是状态标识 —— 这个边界一旦混淆，后期维护和无障碍支持就会出问题。
.nav-btn {
  color: #666;
}
.nav-btn[aria-current="page"],
.nav-btn[aria-current="page"]:focus {
  color: #007bff;
  font-weight: bold;
}