html – 为什么hover伪类覆盖活动伪类

发布时间：2020-12-14 21:31:07 所属栏目：资源来源：网络整理

导读：标题基本上都是这样说的。假设我有一个要更改颜色的元素：hover，但是单击时，我希望它切换回原始颜色。所以，我试过这个： a:link,a:visited,a:active { background: red;}a:hover { background: green;} 事实证明，这不行。经过很多的头痛之后，我意识到

标题基本上都是这样说的。

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

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

事实证明，这不行。经过很多的头痛之后，我意识到：悬停状态是压倒一切：活跃的状态。这很容易解决：

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

(我可以把第一个规则和第三个规则结合起来)。

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

我的问题是这是预期的行为吗？据我所知，活动状态应该总是覆盖：悬停状态，因为：活动状态几乎总是伴随着：悬停状态。

解决方法

是的，这是预期的行为，

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

<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个伪类是相同的，因此适用相同的规则
最后一次匹配的叛乱胜利。

编辑

伪类是相等的，它是最后定义的那个胜利！这里是一个jsFiddle，证明了我的观点：链接定义如下：hover，：link wins(test)所以，你的陈述：hover overriding：link是错误的，它只是一样的：active，它的所有关于顺序。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!