0

我有一个默认的 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 上显示字体大小已被覆盖，但我不知道。

有人有想法么？

4

2 回答 2

1

我相信这是因为a:hover比a:link.

如果原始a:hover字体大小未指定，它将继承自a:link. 但既然有a:hover规范，a.myclass:hover宁可取这个值，也不要更“通用” a.myclass:link。

我在某处读过，将a伪类视为“爱恨”：:link, :visited, :hover, :active, 比前一个更具体。如果你为aor定义了一些东西: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:hover14px。

估计的查找优先级：

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.
于 2009-08-05T02:23:24.807 回答
0

那是因为如果您扩展您将获得的类，则应用样式的方式：

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

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

于 2009-08-05T02:20:45.513 回答