CSS控制何时：焦点选择器应用

Question

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

e.g。在stackoverflow上，如果我在其中一个链接上鼠标按下，但是没有激活，通过在释放之前关闭鼠标，链接获得键盘焦点（如按下Tab键所示，焦点转到下一个链接）。然而，即使它具有焦点，它也不会获得:focus样式。如果我选择链接到链接，我会得到:focus大纲样式。

但是在我正在开发的其中一个网站上，鼠标按下直接给我:focus风格，因此必须有一些细微的细节。

在此代码段中，Chrome中的<a>和<button>元素与我之前的描述相似，可点击的<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＆gt;在GIF中，包括在我的其他网站上。也许是一个Chrome错误，或者当:focus样式被应用时，我还错过了一些我想念的规范吗？伪类CSS规则的顺序是否以某种非显而易见的方式在这里起作用？

Answer 1

:focus是psuedo选择器，它与键盘当前选择的字段有关。通过输入标签应该适用：关注该输入。

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

在CSS ...

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

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

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

当您选中该按钮时，这将执行相同的样式。要使:focus在某些情况下有效，tabindex很重要。要使用相同的:focus样式处理按钮，请务必在其上添加tabindex。

如果您需要更多帮助，请与我们联系。