Question

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

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

但是放置a:focus伪选择器的正确位置是什么？从我的观点来看，有两种可能的变体 - :hover之前和之后。我想知道哪种方法是正确的。

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之前。另一方面，有人说其应该位于:hover之后。但在所有这些情况下，没有讨论原因。或者，有时，推理太难理解了。

Answer 1

首先关闭:focus主要是为了输入元素，仅限于以下内容（taken from this great SO post）：

没有明确的清单，这取决于浏览器。唯一的标准我们有DOM Level 2 HTML，根据其中唯一的元素有一个focus（）方法是HTMLInputElement，HTMLSelectElement， HTMLTextAreaElement和HTMLAnchorElement。这显然省略了 HTMLButtonElement和HTMLAreaElement。

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

考虑到其他伪类，请注意:hover必须在CSS定义中的:link和:visited后才能有效运行，因为您可以访问:link或{{1首先没有悬停的状态，但是为了达到:visited状态，你会先徘徊，因此:active必须在:active之后。

当你:hover时，:focus，click，active混合在一起，所以它的行为深度已经使其成为其他“部分”的唯一“来自其他伪类的行为需要订单。

这是一个代码段hover首先放在大多数:focus个友好元素（:focus而不是其中一个）上的代码：

<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;}

Answer 2

你可以为这两种情况做一个论证，但我会说变体2更有意义 - a：link，a：visited，a：hover，a：focus，a：active。

如果我们从一个链接变为活动链接，我们将从更少意图转向更多意图。焦点意味着比悬停更多的意图，因为焦点意味着所采取的下一个动作（例如按下回车键）适用于该元素。如果你愿意的话，悬停只表示一种调情的兴趣。当用户移动光标时，用户可以将光标悬停在整个页面上，但是当他们实际进入文本框（焦点）时，这意味着更大程度的意图。

此外，如果没有首先到达焦点状态，则无法进入活动状态。让我们拿一个提交按钮 - 触发提交，a）用户可以选择提交按钮并按回车或b）用户只需点击提交按钮即可。在情况（a）中，用户首先关注提交按钮，然后选择它，然后按Enter键激活它（在这种情况下不悬停）。如果（b）用户将鼠标悬停在按钮上，然后单击 - 单击该按钮最终将进入活动状态，但浏览器也会触发附加到焦点的任何事件处理程序。

提升意图的想法不适用于链接与访问的明确 - 在这种情况下，我认为访问主要是链接的变体。尽管如此，访问确实意味着更大程度的意图，因为它表示先前采取的行动（点击或页面访问），并且可能更有可能再次采取。即使您不同意这种逻辑，如果您将链接视为基础，并作为链接的变体访问，那么在链接（基础）之后包含访问（变体）仍然是有意义的。

放置焦点伪选择器

2 个答案: