默认 a:hover 覆盖类 ie6答案

【问题标题】：default a:hover overriding ones with classes ie6默认 a:hover 覆盖类 ie6
【发布时间】：2010-11-16 21:00:28
【问题描述】：

我有一个默认的 a:hover 样式如下：

a:hover { color: black; font-size: 8pt }

但是，当尝试应用诸如以下的类时：

a.myclass:link { font-size: 14px } 
a.myclass:hover { color: red }

没有字体大小，那么它将字体大小改回 8pt。现在这似乎应该如何工作，但它不会发生在 ie7、firefox、chrome 中。（它在 IE6 中确实有效）

更新：在萤火虫中，它实际上在 a:hover 上显示字体大小已被覆盖，但我不知道。

有人有什么想法吗？

【问题讨论】：

它应该在 firebug 中显示覆盖它的内容（它会在 Style 部分中更高的位置）
我想它不会在 IE6 中覆盖它，这很痛苦。

标签： html css hover

【解决方案1】：

我相信这是因为a:hover 比a:link 更具体。

如果原始a:hover 字体大小未指定，它将继承自a:link。但由于有一个 a:hover 规范，a.myclass:hover 宁愿采用这个值，而不是更“通用”的 a.myclass:link。

我在某处读到将a 伪类视为“爱恨”：:link、:visited、:hover、:active，比前一个更具体。如果你为a 或:link 定义了一些东西，它应该被以下所有的伪类继承。不过，该值可以被覆盖，并且伪类的特殊性比定义样式的顺序或附加到链接的其他“真实”类更重要。

它在 IE6 中工作方式不同的原因是 IE6 做错了，这不足为奇。

解析的差异（可能向后）：

a:hover { font-size: 8pt }
a.myclass:link { font-size: 14px } 
a.myclass:hover { }

应该如何：

每个:hover，不管.class，都是8pt。

IE6 是如何理解的：

:hover 与.myclass:hover 不在同一类中。由于没有为.myclass:hover 指定大小，让我们从同一类中的下一个更高可用伪类继承，即.myclass:link。这使得.myclass:hover 14px。

估计的查找优先级：

Others            IE6

a                 a
a.class           a:link
a:link            a:hover
a.class:link      a.class
a:hover           a.class:link
a.class:hover     a.class:hover   <-- Lookup starts here, goes up.

【讨论】：

那为什么只发生在 ie6 上呢？
它在 IE6 中无法“工作”，它实际上在 IE6 中很糟糕。 :o) 显然 IE6 的家伙优先考虑类而不是伪类。虽然我不确定官方规范是怎么说的，但大多数其他人都在做“类之上的伪类”。
所以它应该回退到 a.myclass:link 而不是 a:hover?
我实际上发现它的工作原理与此相反......好吧，要么是那个，要么是其他东西在干扰。
也许我把它弄反了，我只是在你的描述上滑行，没有测试或查找任何东西。你明白了。 ;)

【解决方案2】：

那是因为样式的应用方式如果你扩展你会得到的类：

a{ color:red; font-size:10pt;}
a:hover {font-size:8pt; color:black}
a.myclass{font-size:6pt;text-decoration:none;}
a.myclass:hover {color:red}

现在，如果我们扩展它以显示发生了什么：

a.myclass{font-size:6pt;text-decoration:none;**color:red**} /* got the color from a - we overrode the font size */
a.myclass:hover {color:red;text-decoration:none;font-size:8pt} /* we got the text-decoration from a.myclass - but a:hover overrides myclass so we got the 8pt from there */

如果您开始在这样的星座中混合所有周围效果（边框/填充/边距）和仅侧面效果（边框右；边距顶部；填充左），这种效果实际上会更加奇怪和复杂。

【讨论】：