css - CSS の優先課題

Question

タイトルに正確さが欠けていて申し訳ありません。何を書けばいいのか本当にわかりませんでした。

html:

<div id="blabla">
  hello
  <span class="red">hello2</span>
</div>

CSS：

#blabla{
  color: black;
}

#blabla:hover{
  color: white;
}

.red{
  color: red;
}

マウスがdiv「blabla」の上にあるときに、文字列「hello2」が白くなるようにします。現状では赤のままです。

考えられることは何でも試しましたが、うまくいきませんでした。助けていただければ幸いです。

ありがとう。

score 6 · Accepted Answer

これはあなたが必要とするものです：

#blabla:hover .red {
  color: white;
}

#blabla:hover問題は、セレクターがより具体的である.redにもかかわらず、問題.redの要素自体に適用されるため、優先されることです。

score 1 · Accepted Answer

最終的な CSS ルールを次のように変更できます。

#blabla:hover span.red {
  color: white;
}

あなたが直面している問題は、divblablaバインドのルールが span ルールよりも厳密であることです (つまり、これらのルールはより具体的です)。ルールの詳細については、BrainJar.com の CSS チュートリアル「スタイルシートの使用」を参照してください。

score 0 · Accepted Answer

また、Span 要素のホバー変更を指定する必要があります。

#blabla{
  color: black;
}

#blabla:hover{
  color: white;
}

#blabla span:hover{
  color: white;
}

.red{
  color: red;
}

その div 内のすべての要素を白くしたい場合は、* セレクターを使用しますが、各要素を一度に指定する実装の方が理にかなっています。

3 に答える 3