为何包含<div>子元素的<a>标签无法触发:focus-visible伪类？

代码示例 #

CSS #

*:focus {
    outline: none;
}

a:focus-visible {
  outline: 2px solid #d3af7a;
  outline-offset: 2px;
}

HTML #

<a href="https://example.com">
  this can be focused and trigger styles in :focus-visible
</a>

<a href="https://example.com">
  <div>
    this can be focused but cannot trigger styles in :focus-visible
  </div>
</a>

原因分析 #

在Chromium内核的浏览器（包括Brave）中，当标签包含块级子元素（如