:focus 伪类以及何时应用 [英] The :focus pseudo-class and when it is applied
问题描述
:focus 选择器用于设置一般意义上具有焦点的元素的样式.但是考虑到鼠标按下或触摸等情况，它究竟是什么时候应用的?作为 Web 开发人员，我如何控制它以保持一致?
The :focus selector is used to style elements that have focus in the general sense. But when exactly is it applied, considering cases like mouse down or touch? And how as a web developer can I control it to be consistent?
例如在 Stack Overflow 上，如果我将鼠标放在其中一个链接上，但没有激活，通过在释放之前将鼠标移开，链接将获得键盘焦点(如按 Tab 键所见，焦点转到下一个链接).但是，即使它具有焦点，它也不会获得 :focus 样式.如果我选择一个链接，我会得到 :focus 大纲样式.
e.g. here on Stack Overflow, if I mouse down on one of the links, but do not activate, by moving the mouse off before releasing, the link gets keyboard focus (as seen by then pressing tab, the focus goes to the next link). However it does not get the :focus style even though it has focus. If I tab onto a link though, I get the :focus outline style.
但是在我正在处理的一个网站上，按下鼠标会立即为我提供 :focus 样式，因此必须有一些微妙的细节.
But on one of the websites I am working on, the mouse down gives me the :focus style straight away, so there must be some subtle detail.
在这个片段中，Chrome 中的 <a> 和 元素对我来说就像我之前的描述一样工作，而可点击的 <div> 似乎像后者一样工作.但是在我的一个网站上，后者在所有 3 种情况下都发生了，我什至不确定为什么它们在此代码段中不完全相同，因为我这里没有额外的样式或 JS.
In this snippet, the <a> and <button> elements in Chrome for me work like my former description, and the clickable <div> seems to work like the latter. But on one of my sites the latter is happening in all 3 cases, and I am not even sure why they are not all the same in this snippet, since I have no extra styles or JS here.
$('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 中一切都像默认的 和 :focus 样式时，我是否仍然遗漏了一些微妙的规范?伪类 CSS 规则的顺序在这里是否有某种不明显的影响?
In IE11 Everything works like the default <a> and <button> in the GIF, including on my other sites. Maybe this is a Chrome bug, or is there still some subtle bit of the spec I missed about when a :focus style gets applied? Does the order of pseudo-class CSS rules matter here in some non-obvious way?
推荐答案
:focus 是与键盘当前选择的字段相关的伪选择器.在输入之间切换应该应用 :focus 到该输入.
:focus is the psuedo selector that relates to which field is currently selected by the keyboard. Tabbing through inputs should apply :focus to that input.
:active 是与激活"按钮或链接相关的伪选择器.因此，单击或触摸它会将 :active 应用于该元素.
:active is the pseudo selector that relates to "activating" a button or link. So clicking or touching it will apply :active to that element.
在 CSS...
button:active {
border: solid red 1px;
}
当您对该元素执行操作使其成为被点击的活动链接时，这将添加一个 1px 的红色边框.
This will add a border of 1px that is red while you take action on that element making it the active link being clicked.
button:focus {
border: solid red 1px;
}
当您进入该按钮时，这将执行相同的样式.对于 :focus 在某些情况下工作，tabindex 很重要.对于在按钮上使用相同的 :focus 样式，请确保在按钮上包含 tabindex.
This will do the same styling when you tab into that button. For :focus to work in some cases the tabindex is important. For the same :focus styling to work on buttons make sure to include a tabindex on them.
如果您需要更多帮助，请告诉我.
If you need more help, let me know.
这篇关于:focus 伪类以及何时应用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
