如何在编程式聚焦元素时应用:focus-visible样式

你的需求完全可以通过原生CSS实现，你示例中使用的:focus + :focus-visible 组合就是匹配该场景的标准方案：

• 键盘导航（Tab键聚焦）、编程调用HTMLElement.focus()触发聚焦时，浏览器会匹配:focus-visible伪类，应用你设置的蓝色边框样式
• 鼠标点击触发聚焦时，仅匹配:focus伪类，应用红色边框样式

针对你提到的示例运行正常、实际项目不生效的问题，可按以下优先级排查：

1. 浏览器兼容性问题
   :focus-visible 仅在Chrome 86+、Firefox 85+、Safari 15.4及以上版本原生支持，如果你的项目需要兼容更低版本浏览器，需要引入对应polyfill兜底，或额外通过JS判断聚焦来源的逻辑实现样式区分。
2. 样式优先级被覆盖
   使用浏览器开发者工具的元素样式面板，检查目标元素的样式计算结果，确认是否有其他权重更高的CSS规则覆盖了你的:focus、:focus-visible边框配置。
3. 全局样式干扰
   部分CSS Reset、UI组件库会默认重置:focus-visible的默认样式（比如统一设置outline: none），会导致你的自定义样式不生效。
4. 聚焦逻辑被拦截
   检查项目中是否存在全局的mousedown、focus事件监听调用了preventDefault()，修改了默认聚焦行为，或是有其他业务逻辑动态修改了目标元素的tabindex属性导致聚焦异常。
5. React逻辑异常
   确认实际项目中ref绑定正确，useEffect触发时ref.current存在有效值，没有被条件渲染、异步逻辑跳过聚焦调用。

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