默认 a:hover 覆盖 ie6 类

Question

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

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

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

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

如果没有 font-size，那么它会将 font-size 更改回 8pt。现在这似乎应该如何工作，但在 ie7、firefox、chrome 中却不会发生。（在IE6下有效）

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

有人有主意吗？

Answer 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, ，是 8 分。

IE6是如何理解的：

:hover 与以下不在同一个班级 .myclass:hover. 。由于没有指定尺寸 .myclass:hover, ，让我们继承同一个类中下一个更高的可用伪类，即 .myclass:link. 。这使得 .myclass:hover 14 像素。

估计的查找优先级：

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.

Answer 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 */

这个效果其实是更加古怪，更复杂，如果你开始四处效果（边框/填充/保证金）和侧面唯一的混合所有（右边框，上边距;填充左）在这样的星座。