Question

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

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中，它实际上显示了字体大小：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，都是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.

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

如果你开始在这样的星座中混合所有周围效果（边界/填充/边距）和仅侧面（边界右边;边缘顶部;填充左边），这种效果实际上甚至更奇怪且更复杂。

默认a：悬停覆盖类ie6的覆盖

2 个答案: