デフォルトは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のfont-sizeが上書きされていますが、私にはわかりません。

アイデアはありますか？

Answer 1

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

元の a：hover フォントサイズが指定されていない場合、 a：link から継承されます。しかし、 a：hover の仕様があるため、 a.myclass：hover は、より多くの「一般」よりもこの値を取ります。 a.myclass：link 。

a 擬似クラスを＆quot; love hate＆quot;として考えるためにどこかを読んだ：：link 、：visited 、：hover 、：active 、以前よりも具体的なもの。 a または：link に何かを定義する場合、次のすべての擬似クラスに継承される必要があります。ただし、その値はオーバーライドできます。また、疑似クラスの特異性は、スタイルが定義されている順序や、他の「実際の」どのようなものよりも重要です。クラスはリンクに添付されます。

IE6で動作が異なる理由は、IE6が間違っているからです。これは驚くべきことではありません。

解析の違い（逆向きの場合もある）：

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

方法：

   .class に関係なく、：hover はすべて8ptです。

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

このようなコンステレーションですべての周辺エフェクト（境界線/パディング/マージン）とサイドオンリーエフェクト（境界線右;マージン上部;パディング左）を混合し始めると、この効果は実際にはさらに奇妙で複雑になります。