:focus 伪类及其应用时间

Question

:focus 选择器用于对具有一般意义的焦点元素进行样式设置。但考虑到鼠标按下或触摸等情况，它究竟何时应用？作为 Web 开发人员，我如何控制它以保持一致？

例如在 Stack Overflow 上，如果我在其中一个链接上按下鼠标，但没有激活，通过在释放之前将鼠标移开，链接将获得键盘焦点（然后按 Tab 键，焦点转到下一个链接）。然而，即使它有焦点，它也没有得到:focus 样式。如果我点击链接，我会得到:focus 轮廓样式。

但是在我正在开发的一个网站上，鼠标按下立即给了我:focus 样式，所以肯定有一些微妙的细节。

在这个 sn-p 中，Chrome 中的 <a> 和 <button> 元素就像我之前的描述一样工作，而可点击的 <div> 似乎像后者一样工作。但是在我的一个网站上，后者在所有 3 种情况下都发生了，我什至不确定为什么它们在这个 sn-p 中不一样，因为我这里没有额外的样式或 JS。

$('button').on('click', function() {});
$('.fake-btn').on('click', function() {});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>
  <a href="www.example.com">A link</a>
</p>
<p>
  <button>A button</button>
</p>
<p>
  <div class="fake-btn" tabindex="0">A clickable element</div>
</p>

在 IE11 中，一切都像 GIF 中的默认 <a> 和 <button> 一样工作，包括在我的其他网站上。也许这是一个 Chrome 错误，或者当应用 :focus 样式时，我是否仍然遗漏了一些细微的规范？伪类 CSS 规则的顺序在这里是否以某种不明显的方式很重要？

Answer 1

:focus 是与键盘当前选择的字段相关的伪选择器。在输入中切换应将 :focus 应用于该输入。

:active 是与“激活”按钮或链接相关的伪选择器。因此，点击或触摸它会将:active 应用于该元素。

在 CSS 中...

button:active {
    border: solid red 1px;
}

当您对该元素执行操作时，这将添加一个 1px 的红色边框，使其成为被点击的活动链接。

button:focus {
    border: solid red 1px;
}

当您进入该按钮时，这将执行相同的样式。对于:focus 在某些情况下工作，tabindex 很重要。要在按钮上使用相同的 :focus 样式，请确保在按钮上包含 tabindex。

如果您需要更多帮助，请告诉我。