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

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

假设我有一个要更改颜色的元素：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 >item</li><li >item</li><li >item</li><li >item</li><li >item</li></ul>

这里的课程首先也和课项一起来。
但是如果我们以错误的顺序声明我们的CSS不会提供想要的行为

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

如您所见，最后一个匹配选择器将被使用。
它与你的例子是一样的，没有什么是更多的逻辑，
2个伪类是相同的，因此适用相同的规则
最后一次匹配的叛乱胜利。

编辑

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

总结

以上是内存溢出为你收集整理的html – 为什么hover伪类覆盖活动伪类全部内容，希望文章能够帮你解决html – 为什么hover伪类覆盖活动伪类所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。