html – 放置焦点伪选择器的位置

2023年3月13日 277次阅读

众所周知,链接的伪类应遵循LoVe-HAte规则：

a:link
a:visited
a:hover
a:active

但是放置a：focus伪选择器的正确位置是什么？从我的观点来看,有两种可能的变体 – 前后：悬停.我想知道哪种方法是正确的.

var. 1        var. 2

a:link     |  a:link
a:visited  |  a:visited
a:focus    |  a:hover
a:hover    |  a:focus
a:active   |  a:active

一个小小的说明：在互联网上,我已经看到有人说要把它放在前面：悬停.另一方面,有人说其应该位于：hover之后.但在所有这些情况下,没有讨论原因.或者,有时,推理太难理解了.

最佳答案 首先关注：焦点主要是针对输入元素,并限于以下(
taken from this great SO post)：

There isn’t a definite list, it’s up to the browser. The only standard
we have is 07001, according to which the only elements that
have a focus() method are HTMLInputElement, HTMLSelectElement,
HTMLTextAreaElement and HTMLAnchorElement. This notably omits
HTMLButtonElement and HTMLAreaElement.

因此,虽然完全有效地搜索其背后的某些“推理”,但我会说这一切都归结为它无论如何都会对任何订单起作用,因此即使在理论上建立标准也是没用的.

考虑到其他伪类,请注意：hover必须在以下后面：链接和：在CSS定义中访问以便有效地工作,因为您可以到达：link或：visited状态,甚至不首先悬停,但要达到：活跃状态,您将会徘徊首先,因此：活跃必须在之后：悬停.

当你：聚焦它就像混合了点击,活动,悬停在一起,所以它的行为深度已经使其成为其他需要订单的伪类的“部分”行为的独特之处.

这里有一个片段放置：焦点从头到尾最重要：焦点友好元素(< button>不是其中之一)：

/* placed 1st */
input:focus {background: limegreen;}
input:link {color: red;}
input:visited {color: green;}
input:hover {color: hotpink;}
input:active {color: blue;}
button:link {color: red;}
/* placed 2nd */
button:focus {background: limegreen;}
button:visited {color: green;}
button:hover {color: hotpink;}
button:active {color: blue;}
a:link {color: red;}
a:visited {color: green;}
/* placed 3rd */
a:focus {background: limegreen;}
a:hover {color: hotpink;}
a:active {color: blue;}
select:link {color: red;}
select:visited {color: green;}
select:hover {color: hotpink;}
/* placed 4th */
select:focus {background: limegreen;}
select:active {color: blue;}
textarea:link {color: red;}
textarea:visited {color: green;}
textarea:hover {color: hotpink;}
textarea:active {color: blue;}
/* placed last */
textarea:focus {background: limegreen;}
<textarea name="" id="" cols="30" rows="10"></textarea><br>
<select name="" id="">
  <option value="a">first</option>
  <option value="b">second</option>
</select>
<input type="text"><br>
<a href="#">Anchor link</a><br>
<button type="text">Click Me</button>
点赞