css - CSS a：hoverは奇妙なことにスタイルを継承しています

Question

CSSでリンクのスタイルを設定している場合、クラス名を持つ親要素を使用していることに気付きます。

div.class a { ... }

リンクのホバー状態もこのスタイルシートを継承していますが、特定のクラスを指定した場合に限ります。

JSFiddle

：hoverスタイルシートを複製せずにこれを回避するにはどうすればよいですか？

Answer 1

!importantホバースタイルに使用できます。

a:hover {color:#d00 !important;}

Answer 2

セレクターdiv.div aはセレクターよりも具体的であるa:hoverため、優先されます。

ホバーセレクターをより具体的にすると、最後のdivにも使用されます。例えば：

html body a:hover {color:#d00;}