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

Question

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

例如,在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中,一切都像GIF中的默认<a>和<button>,包括在我的其他网站上.也许是一个Chrome错误,或者:focus在应用样式时我还缺少一些我想念的规范？伪类CSS规则的顺序是否以某种非显而易见的方式在这里起作用？

Answer 1

:focus是与键盘当前选择的字段相关的伪选择器。按 T​​ab 键浏览输入应将 :focus 应用于该输入。

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

在 CSS 中...

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

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

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

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

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