为什么悬停伪类会覆盖活动伪类

Question

标题基本上说明了一切。

假设我有一个元素想要在 :hover 上更改颜色，但是在单击时，我希望它切换回原始颜色。所以，我尝试过：

a:link, a:visited, a:active {
    background: red;
}
a:hover {
    background: green;
}

事实证明，这是行不通的。经过一番绞尽脑汁后，我意识到 :hover 状态会覆盖 :active 状态。这很容易解决：（

a:link, a:visited {
    background: green;
}
a:hover {
    background: red;
}
a:active {
    background: green;
}

我可以将第一条规则与第三条规则结合起来）。

这是小提琴： http://jsfiddle.net/V5FUy/

---

我的问题：这是预期的行为吗？据我了解， :active 状态应该始终覆盖 :hover 状态，因为 :active 状态几乎 始终伴随 :hover 状态。

Answer 1

是的，这是预期的行为，

让我们看另一个例子。只需添加两个类，

<ul>
<li class="item first">item</li>
<li class="item">item</li>
<li class="item">item</li>
<li class="item">item</li>
<li class="item last">item</li>
</ul>

这里​​类第一个也与类项一起出现。
但是，如果我们以错误的顺序声明 css，而不会给出

.first { background: blue; }
.item { background: red; }

您所看到的所需行为，则将使用最后一个匹配的选择器。
和你的例子是一样的，不管怎样更符合逻辑，
2 个伪类被认为是相等的，因此适用相同的规则
最后匹配的防守者获胜。

edit

伪类是平等的，最后定义的伪类获胜！这是一个 jsFiddle 证明了我的观点 :link 在 :hover 之后定义， :link 获胜 (test) 所以，你的声明:hover 覆盖 :link 是错误的，它与 :active 一样，都是关于顺序的。

Answer 2

活动状态必须在悬停状态之后声明，在CSS中，您将活动状态之前聚集在一起，这样它就不会被触发。

如果您指定正确的操作顺序，它就可以工作，如下所示，它就可以正常工作。

a.noworks:link, a.noworks:visited {
    background: red;
}

a.noworks:hover {
    background: green;
}

a.noworks:active {
    background: red;
}

所以，回答你的问题，是的，这是预期的行为。

以下是操作顺序：

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

Answer 3

因为在第一个代码中，您在定义 :active 之后定义了 :hover，所以 :hover “覆盖”了 :active >。在第二种情况下，情况正好相反，:active 覆盖 :hover。

Answer 4

编辑：

抱歉，我误解了这个问题。

基本上，当您处于活动状态（使用鼠标指针）时，您实际上也处于悬停状态。因此，根据 CSS 规则，它将读取样式表中的最后一个。

当您将鼠标悬停在链接上并按住鼠标键时，如果我们将伪类视为普通类，就会像这样：

<a class="active hover"></a>

因此，如果您的CSS是，

.active{color:green}
.hover{color:red}

它将应用红色，

但如果您的CSS是，

.hover{color:red}
.active{color:green}

它将应用绿色

来自 W3C

a:link { color: red } /* 未访问的链接 */
a:visited { color: blue } /* 访问过的链接 */
a:hover { color: Yellow } /* 用户悬停 */
a:active { color: Lime } /* 活动链接 */

请注意，A:hover 必须放置在 A:link 和 A:visited 之后
规则，否则级联规则将隐藏“颜色”
A:hover 规则的属性。同样，因为 A:active 被放置
A：悬停后，当用户同时使用时，将应用活动颜色（石灰）
激活并悬停在 A 元素上。

Answer 5

这就是它的工作原理，我将尝试解释原因。正如我们所知，CSS 在应用样式时会继续搜索文档并应用最特定于该元素的样式。

示例：

li.betterList { better list styling here }

更具体，将覆盖

li { list styling here }

这些 Puesdo 选择器都被认为具有相同的特异性，因此最后一行将覆盖前一行。 W3Schools 上的注释证实了这一点

注意： 在 CSS 定义中，:active 必须位于 :hover（如果存在）之后才能生效！

你也可以把这个 CSS 扔到你的 jsfidle 上并观察它的覆盖，因为它们具有相同的特异性

.works {background: red}
.works {background: green}

Answer 6

这是预期的行为，因为大多数人总是将 :hover 伪类放在规则组的末尾。

声明的顺序与伪类有关（请参阅此处的更多信息： http://reference.sitepoint.com/css/伪类），因此最终规则优先，就像 CSS 中的其他规则一样。

对于大多数人来说，我认为期望的行为：

a:link {
  ⋮ declarations
}
a:visited {
  ⋮ declarations
}
a:hover {
  ⋮ declarations
}

由于 :active 不太有用，因此被忽略......或与 a:link 和 a 结合使用:visited... 然后它被 a:hover 覆盖

W3C 在这里说明：

请注意，A:hover 必须放置在 A:link 和 A:visited 之后
规则，否则级联规则将隐藏“颜色”
A:hover 规则的属性。同样，因为 A:active 被放置
A：悬停后，当用户同时使用时，将应用活动颜色（石灰）
激活并悬停在 A 元素上。

http://www.w3.org/TR/CSS2/selector .html#dynamic-pseudo-classes

甚至 W3schools 也正确地理解了这一点：

注意：CSS 中 a:hover 必须位于 a:link 和 a:visited 之后
定义才能有效！！

注意：CSS 定义中 a:active 必须位于 a:hover 之后
才能有效！！

http://www.w3schools.com/css/css_pseudo_classes.asp

Answer 7

我认为您至少应该考虑链接（或按钮）上的用户交互流程。

通常，

1. :link 始终是默认的（未触及），
2. 然后当用户指向按钮时，:hover 就会出现进入游戏。
3. 一旦用户指向链接或按钮，他/她就会点击，这就是 :active 的用武之地。

这是我们与链接（或按钮）交互的标准顺序。 :visited 除外，只有当用户先前按下该链接时，结果才会明显。

如果您在处理链接时记住助记符：' L o V e H A te '，那将会非常有帮助(除了 :visited，它不适用于按钮）。

但是，如果您确实想要进行覆盖，例如，您想要更改已在活动状态下访问过的链接的颜色，您可以执行以下操作：

a:visited:active {
     color: red;   
}

但底线是，如果不是，请避免更改标准序列必要的。

Answer 8

您可以使用 :not() 选择器让 :active 伪类覆盖 :hover 伪类，无论声明顺序如何。

a:link, a:visited, a:active {
    background: red;
}

a:hover:not(:active) {
    background: green;
}

这样，只有当 :active 选择器未触发时， :hover 选择器才会被触发。