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

众所周知,链接的伪类应遵循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>
点赞

发表评论

电子邮件地址不会被公开。 必填项已用*标注