WordPress Stockholm主题无障碍Tab导航内容高亮实现咨询

完全可以用简单的CSS命令实现Tab导航时的焦点高亮，直接覆盖主题的默认样式就行，具体代码和操作如下：

• 全局通用高亮样式（适配所有可聚焦元素）：

/* 自定义Tab导航焦点高亮，替换主题默认的隐藏样式 */
:focus-visible {
  outline: 3px solid #2563eb; /* 可根据网站配色替换高亮颜色 */
  outline-offset: 2px; /* 控制高亮框与元素的间距，避免紧贴 */
}

/* 兼容不支持:focus-visible的旧浏览器 */
:focus {
  outline: 3px solid #2563eb;
  outline-offset: 2px;
}

• 差异化高亮（针对按钮、链接、表单元素）：
  如果需要给不同类型元素设置不同的高亮效果，可使用以下代码：

a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
  outline: 2px solid #16a34a;
  box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.3); /* 添加柔和阴影增强辨识度 */
}

怎么添加这些CSS #

1. 登录WordPress后台，进入「外观」→「自定义」→「额外CSS」
2. 把上面的代码粘贴到输入框里，点击「发布」就能生效

设置完成后，用户按Tab键导航时，当前选中的元素会显示清晰的高亮边框，满足无障碍规范要求的视觉反馈。

内容的提问来源于stack exchange，提问作者Ali Fahmy