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

这个差异其实是浏览器针对不同元素类型，对:focus-visible选择器的触发逻辑做了区分，核心是为了优化用户体验：

首先得搞清楚:focus-visible的设计逻辑：它是用来替代传统的:focus，只在浏览器判断用户需要明确看到聚焦状态的时候才生效——比如用户用Tab键导航（键盘交互），或者元素本身需要聚焦反馈来提示可输入。

为什么按钮和输入框表现不同？ #

• 输入框（<input>等表单控件）：这类元素的核心功能是接收用户输入，不管是手动点击、Tab切换还是编程式聚焦，浏览器都认为用户需要明确知道“这个元素现在处于可输入状态”，所以编程式调用.focus()会触发:focus-visible。
• 按钮（<button>）：浏览器默认的逻辑是，只有当用户通过键盘（Tab/回车键）触发聚焦时，才需要显示聚焦样式——因为这时候用户是用键盘导航，需要视觉反馈来确认当前选中的按钮；而如果是鼠标点击或者脚本触发的聚焦，浏览器认为用户已经通过其他方式明确了交互目标，不需要额外的聚焦提示，所以不会触发:focus-visible。

怎么让编程式聚焦按钮时也触发:focus-visible？ #

如果你需要强制在编程式聚焦按钮时显示:focus-visible样式，可以在调用.focus()时传入focusVisible: true参数，告诉浏览器强制触发聚焦可见状态：

document.querySelector('#trigger-button').addEventListener('click', () => { 
  // 强制触发:focus-visible
  document.querySelector('#button').focus({ focusVisible: true }); 
}); 
document.querySelector('#trigger-input').addEventListener('click', () => { 
  document.querySelector('#input').focus(); 
});

这个参数是标准的Web API，目前主流浏览器（Chrome 86+、Firefox 88+、Edge 86+）都支持。如果需要兼容更老的浏览器，可以考虑手动添加自定义类来模拟:focus-visible的效果：

const button = document.querySelector('#button');
document.querySelector('#trigger-button').addEventListener('click', () => { 
  button.focus();
  button.classList.add('force-focus-visible');
});

// 监听键盘触发的聚焦，同步添加样式
button.addEventListener('focus', (e) => {
  if (e.isTrusted && e.detail === 0) { // 键盘触发的聚焦特征
    button.classList.add('force-focus-visible');
  }
});

// 失焦时移除样式
button.addEventListener('blur', () => {
  button.classList.remove('force-focus-visible');
});

再配合修改CSS：

div:has(:focus-visible),
div:has(.force-focus-visible) { 
  border: 2px solid red; 
}

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