标题基本上都是这样说的。
假设我有一个要更改颜色的元素: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,它的所有关于顺序。