html增加位置选择,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;}

first

second

Anchor link

Click Me