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

Question

如果你运行下面的演示，并在第三个链接上单击+hold(在释放点击之前保持1秒)，你会看到它们从css(红色轮廓)中获得相同的:focus伪选择器样式。

.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链接上看到红色虚线的原因。

那么，为什么在第四个链接中，当你点击+按住键时没有看到黑色的轮廓呢?

Answer 1

当你点击一个可聚焦的元素时，它也会获得infocus，但你的误解是浏览器内部应用了以下css:

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

实际上浏览器使用focus-visiblecss属性是这样的:

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

focus-visible是最近由大多数浏览器(除了safari)引入的css4级别属性。它是专门为你所观察到的而设计的。这种行为在输入字段的情况下变得更加明显(查看MDN的示例)，在那里您不必按住点击来查看结果。在锚标记的情况下，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;
}