html - :focus pseudo-class and when it is applied

Question

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

例如在 Stack Overflow 上，如果我在其中一个链接上按下鼠标，但没有激活，通过在释放之前将鼠标移开，链接获得键盘焦点(如按下 Tab 键所示，焦点转到下一个链接)。但是它没有得到 :focus风格，即使它有焦点。如果我点击一个链接，我会得到 :focus大纲样式。

但是在我正在使用的网站之一上，按下鼠标会给我 :focus风格直接，所以一定有一些微妙的细节。

在此代码段中，<a>和 <button> Chrome 中的元素对我来说就像我之前的描述一样，以及可点击的 <div>似乎像后者一样工作。但在我的一个网站上，后一种情况在所有 3 种情况下都发生了，我什至不确定为什么在这个片段中它们不完全相同，因为我这里没有额外的样式或 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 中一切都像默认的一样工作 <a>和 <button > 在 GIF 中，包括在我的其他网站上。也许这是一个 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。

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