css - CSS :not 疑似クラスが期待どおりに機能しないのはなぜですか?

Question

次の HTML を検討してください。

<div class="a">
    <div class="b">Hello</div>
  </div>
  <div class="c">
    <div class="b">World</div>
</div>

次の CSS の色を追加すると、予想どおり、"World" だけが赤で表示されます。

.c .b {
  color: red;
}

ただし、代わりに次の CSS を追加すると、「Hello」と「World」の両方が赤で表示されます。

:not(.a) .b {
  color: red;
}

なんで？

Answer 1

次のように指定する必要があります:-

デモ

div:not(.a) .b {
  color: red;
}

疑似クラス :not

構文は selector:not(){ properties }

Answer 2

:not疑似クラスは引数で表されない要素を表すため、除外したい要素をセレクターの前に指定する必要があります:not

あなたの例では、代わりにこれを試してください：

div:not(.a) .b {
  color: red;
}