0

次のように、デフォルトの 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 の font-size がオーバーライドされていることを示していますが、私にはわかりません。

アイデアはありますか？

4

2 に答える 2

1

a:hoverより具体的だからだと思いますa:link。

元のa:hoverfont-size が指定されていない場合は、 から継承され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: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 */

このようなコンスタレーションで、全周効果 (border/padding/margin) と側面のみの効果 (border-right;margin-top; padding-left) を混合し始めると、この効果は実際にはさらに奇妙で複雑になります。

于 2009-08-05T02:20:45.513 に答える