CSS セレクタどこまでの範囲に有効なのか？

CSS セレクタどこまでの範囲に有効なのか？

CSSの難しさはどこまでが影響されるかに尽きます。

CSS は、表示属性を class というものに設定しておきます。

class には、名前を付けることができます。

class は、以下のように影響する範囲があります。

影響範囲

<div class="abc">
    ABC
    <div class="def1">
      ABCDEF1
    </div>
    <div class="def2">
      ABCDEF2
    </div>
</div>

「ABC」の文字は、class abc の属性を持ちます。
「ABCDEF1]の文字は、class abc と class def1 の属性を持ちます。
「ABCDEF2」の文字は、class abc と class def2 の属性を持ちます。
仮に、
class abc が、文字の色が赤という属性
class def1 が、太字という属性
class def2 が、下線という属性
の場合
「ABC」の文字は、class abc の属性を持つので「赤い文字」
「ABCDEF1]の文字は、class abc と class def1 の属性を持つので「赤い文字」で「太字」
「ABCDEF2」の文字は、class abc と class def2 の属性を持つので「赤い文字」で「下線」
同じ条件で、以下のように書くと・・・

<div class="abc">
    <div class="def1 def2">
      ABCDEF1DEF2-1
    </div>
</div>
<dev class="abc def1 def2">
      ABCDEF1DEF2-2
</dev>

ABCDEF1DEF2-1 も ABCDEF1DEF2-2 も「赤い文字」で「太字」で「下線」の属性を持ちます。
※class は、半角空白で区切ることで複数のclassを指定できる。