示例代码：http : //jsfiddle.net/RuQNP/<!DOCTYPE html><html><head> <title>Foo</title> <style type="text/css"> a:link, a:visited { color: blue; } a:hover, a:active { color: red; } .foo a:link, .foo a:visited { color: green; } /* A possible fix */ /* .foo a:hover, .foo a:active { color: red; } */ </style></head><body> <div class="foo"> <a href="http://example.com/">Example</a> </div></body></html>我期待的是：该链接在悬停时将显示为红色。我得到的是：该链接在悬停时显示为绿色。问题：为什么在colorin .foo a:link, .foo a:visited 选择器中定义的优先于in a:hover, a:active？这是怎么回事？我知道我可以修复它，并通过取消注释注释的代码来获得期望的结果。但是，我想知道如何校正 .foo a:link, .foo a:visited选择器，使其不会覆盖colorin中的定义a:hover, a:active？如果我能正确理解http://www.w3.org/TR/CSS21/cascade.html#specificity（感谢BoltClock），则这是代码中各种选择器的特异性表。a:link - 0 0 1 1a:visited - 0 0 1 1a:hover - 0 0 1 1a:active - 0 0 1 1.foo a:link - 0 0 2 1.foo a:visited - 0 0 2 1因此，为定义的样式.foo a:link会覆盖伪类和伪类都应用于class的A元素a:hover时的样式。linkhoverfoo同样，为定义的样式.foo a:visited会覆盖伪类以及伪类都应用于class的A元素a:hover 时的样式。visitedhoverfoo
3 回答
慕村9548890
TA贡献1884条经验 获得超4个赞
当你第一次开始使用CSS，你可能已经了解了爱恨交织助记符在其中指定链接选择器（顺序a:link，a:visited，a:hover，a:active）。您是否曾经想过为什么选择此助记符？
好，规范中有一条注释，说明当使用多个规则和动态伪类的所有规则应用于同一个元素时，如何处理它们，这说明了为什么需要按此顺序设置链接选择器：
请注意，必须将A：hover放在A：link和A：visited规则之后，否则级联规则将隐藏A：hover规则的'color'属性。同样，由于A：active放置在A：hover之后，因此当用户激活并悬停在A元素上时，将应用活动颜色（石灰）。
无论如何，我在上面要说明的一点是，作为伪类的所有四个伪类都具有相同的特异性。关于特异性的其他所有内容都适用。在这种情况下，在一堆同样特定的选择器中，将应用最后一个规则。何时或如何触发每个伪类与之无关。
现在，.foo选择器的简单介绍使您的第二组链接/访问规则覆盖了您的第一组链接/访问样式和悬停/活动样式，从而迫使具有该类的元素中的链接始终显示为绿色，直到您添加悬停/ .foo选择器激活样式。
抱歉，如果我的答案似乎被缝合或滑了一下，我现在正在iPhone上输入此字，很难在这里思考...
- 3 回答
- 0 关注
- 627 浏览
相关问题推荐
添加回答
举报
0/150
提交
取消