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

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

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

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

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

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

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

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

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

解决方法

是的，这是预期的行为，

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

<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不会提供想要的行为@H_301_3@

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

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

编辑@H_301_3@

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

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

解决方法

猜你在找的HTML相关文章