为什么焦点内可聚焦元素上的黑色轮廓内部 css 样式不适用于单击+按住？

Question

如果你运行下面的演示，并在第三个link上点击+按住（松开点击前按住1秒），你会看到它们得到相同的样式:focus 来自 css（红色轮廓）的伪选择器。

.ext:focus {
  outline: 1px dotted red;
}

<a href="#">1. Get me in focus with tab to see black outline -- Browser default </a>
<br><br>

<a class="ext" href="#">2. Get me in focus with tab to see red outline -- ext css </a>

<br><br>

<a class="ext" href="#">3. Click+hold to see red outline -- supposody gets me in focus </a>
<br><br>
<a  href="#">4. Click+hold to see black outline -- doesnt work as expected!</a>

我的直觉是，当您单击并按住任何可聚焦元素时，它会聚焦该元素，这就是为什么您在 #3 link 上看到红色虚线轮廓的原因。

那么，为什么在第四个 link 中单击 + 按住时看不到黑色轮廓？

Answer 1

确实，当您单击可聚焦元素时，它也会获得 infocus，但您的误解是浏览器在内部应用了以下 css：

a:focus {
  outline: 2px solid black;
}

实际上浏览器是这样使用 focus-visible css 属性的：

a:focus-visible {
  outline: 2px solid black;
}

focus-visible 是 css4 级属性最近大多数浏览器（除了 safari）引入的。它是专门为您所观察到的而设计的。这种行为在输入字段 (check out MDN's example) 的情况下变得更加明显，您无需按住单击即可查看结果。在锚标记的情况下，focus-visible 仅将样式应用于那些通过键盘而不是鼠标聚焦的元素。应该注意 button 元素的行为类似于 a 元素，但 input 元素将 focus-visible 视为与 focus 相同，即使单击它也是如此获取 input:focus-visible{...}.

中提及的样式

示例：

input:focus-visible, button:focus-visible {
  outline: 2px dotted black;
}

<input type="text" value="Click/tab shows outline">

<button>Only tab shows outline</button>

此外，您可以在浏览器中检查元素并将元素的状态切换为 focus-visible。您将看到用户代理 (chrome) 应用了以下样式：

a:-webkit-any-link:focus-visible {
    outline-offset: 1px;
}
user agent stylesheet
a:-webkit-any-link {
    color: -webkit-link;
    cursor: pointer;
    text-decoration: underline;
}
user agent stylesheet
:focus-visible {
    outline: -webkit-focus-ring-color auto 1px;
}

为什么焦点内可聚焦元素上的黑色轮廓内部 css 样式不适用于单击+按住？

Why does the internal css style of black outline on in-focus focusable elements, not apply on click+hold?

html

css

user-agent

onfocus

outline