编程式调用.focus()时:has(:focus-visible)选择器对按钮不匹配的原因咨询

这事儿我之前也踩过坑！核心原因是浏览器对用户主动交互触发的焦点和编程式间接触发的焦点有着完全不同的:focus-visible判定逻辑。

背后的设计逻辑 #

:focus-visible的诞生是为了解决一个痛点：避免不必要的焦点样式干扰用户。比如用户用鼠标点击按钮时，按钮会获得焦点，但用户通常不需要看到焦点框；而键盘用户用Tab导航时，必须有清晰的焦点指示才能知道当前选中的元素。

基于这个设计，浏览器会区分两种焦点触发场景：

• 用户主动交互触发：比如用Tab键导航、直接点击目标元素，这种场景下浏览器判定用户需要焦点反馈，会触发:focus-visible。
• 编程式/间接触发：比如通过JS调用.focus()、或者在其他元素的交互回调里触发目标元素的焦点，这种场景下浏览器默认认为用户不需要焦点反馈（尤其是按钮这类非输入型元素），所以不会触发:focus-visible。

而输入框是个例外——因为输入框的核心功能是接收用户输入，浏览器认为即使是编程式聚焦，用户也需要看到焦点来明确输入位置，所以会触发:focus-visible。

验证你的案例 #

你可以在编程式聚焦后，在控制台输入document.activeElement，会发现焦点确实在目标按钮上，但浏览器就是不会给它应用:focus-visible样式，这完全是浏览器的判定规则导致的。

解决方案 #

如果你确实需要在编程式聚焦按钮时触发:focus-visible，有两种可行方法：

1. 使用原生的focusVisible选项（Chrome 108+支持） #

现在部分现代浏览器支持在.focus()方法中传入focusVisible: true参数，强制触发:focus-visible状态：

document.querySelector('#trigger-button').addEventListener('click', () => { 
  document.querySelector('#button').focus({ focusVisible: true }); 
});

2. 手动模拟焦点状态（兼容所有浏览器） #

如果需要兼容旧版浏览器，可以手动给按钮添加一个自定义类，然后在CSS中把它和:focus-visible关联起来：

div { 
  border: 1px solid black; 
  margin: 10px 0; 
} 
div:has(:focus-visible), div:has(.force-focus-visible) { 
  border: 2px solid red; 
}

document.querySelector('#trigger-button').addEventListener('click', () => { 
  const targetBtn = document.querySelector('#button');
  targetBtn.focus();
  targetBtn.classList.add('force-focus-visible');
  // 按钮失去焦点时移除类，避免样式残留
  targetBtn.addEventListener('blur', () => {
    targetBtn.classList.remove('force-focus-visible');
  }, { once: true });
});

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