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

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>

这里的 class first 也与 class item 一起出现。 但是如果我们以错误的顺序声明我们的 CSS，就不会给出想要的行为

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

如您所见，将使用最后一个匹配的选择器。 它和你的例子一样，没有什么更符合逻辑的， 2 个伪类被认为是相等的，因此适用相同的规则 最后匹配的防守获胜。

编辑

伪类是平等的，它是最后定义的赢家！这是一个 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 }    /* unvisited links */
a:visited { color: blue }   /* visited links   */
a:hover   { color: yellow } /* user hovers     */
a:active  { color: lime }   /* active links    */

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

Answer 5

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

例子：

li.betterList { better list styling here }

更具体，会覆盖

li { list styling here }

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

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

你也可以把这个 CSS 放在你的 jsfidle 上，然后看着它被覆盖，因为它们具有相同的特性

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

Answer 6

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

声明顺序对伪类很重要（在此处查看更多信息：http://reference.sitepoint.com/css/pseudoclasses），因此最终规则优先，与 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:hover 之后，当用户同时使用活动颜色（石灰） 激活并悬停在 A 元素上。

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

即使是 W3schools 也能做到这一点：

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

注意：a:active 必须在 CSS 定义中按顺序出现在 a:hover 之后 要有效！！

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

Answer 7

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

通常，

1. :link一直是默认的（未改动），
2. 然后，当用户指向按钮时，:hover 就会发挥作用。
3. 一旦用户指向链接或按钮，他/她就会点击，这就是:active 的作用。

这是我们如何与链接（或按钮）交互的标准顺序。 :visited 除外，其结果仅在用户之前按下链接时才明显。

如果您在处理链接时牢记助记符：' L o V e HA 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;
}

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