为什么点击按住（click+hold）可聚焦元素时，默认:focus黑色轮廓样式不生效？

原因解释 #

这是浏览器默认用户代理样式的设计导致的，核心差异在于自定义:focus样式和浏览器默认:focus样式的生效规则不同：

• 你自己写的.ext:focus规则没有额外限制，只要元素进入:focus状态就会生效：当你点击按住第三个链接时，元素确实获得了焦点，所以红色轮廓会正常显示。
• 而浏览器对<a>标签的默认焦点轮廓，在现代浏览器中仅对键盘触发的焦点生效（比如用Tab键切换到元素上），鼠标交互触发的:focus状态默认不会显示默认轮廓。

本质上现在主流浏览器的默认样式大致是这样实现的：

/* 浏览器默认UA样式示例 */
a:focus {
  outline: none;
}
a:focus-visible {
  outline: 1px dotted black; /* 不同浏览器的默认轮廓样式略有差异 */
}

:focus-visible是专门用来匹配「需要向用户显示焦点提示」的场景，默认规则下只有键盘导航触发的焦点才会匹配这个伪类，鼠标点击/按住触发的焦点不会匹配，所以第四个链接在你点击按住的时候看不到默认黑色轮廓。

验证方法 #

你可以给所有a标签加一条全局规则测试：

a:focus {
  outline: 1px dotted black !important;
}

添加后再点击按住第四个链接，就会和第三个链接一样显示对应轮廓了。

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