子孫セレクタにおける初心者の間違い

以下のセレクタを見てください：

cssp.eee {
  color: red;
}

このようなセレクタは、クラス eee を持つ段落を選択することは、もうご存知のはずです。例えば、次のような要素です：

html<p class="eee">
  lorem ipsum
</p>
<p class="eee">
  lorem ipsum
</p>

では、次にこのセレクタを見てください：

cssp .eee {
  color: green;
}

このセレクタが前のものと異なる点は、タグ名とクラス名の間にスペースがあることです。このスペースは子孫セレクタを表します。つまりこの場合、段落の *内部にある* クラス eee を持つすべての要素を選択します。例えば、このセレクタは以下の span 要素を選択します：

html<p>
  lorem <span class="eee">ipsum</span>
</p>
<p>
  lorem <span class="eee">ipsum</span>
</p>

コードの実行結果：

もう一度まとめます： p.eee — このようなセレクタは、クラス eee を持つ段落を選択します。一方、 p .eee とすると、段落の*内部にある* クラス eee を持つすべての要素を選択します。この違いをしっかり理解してください。

Задание 1

以下のコードのセレクタが何を選択するか説明してください。その後、そのセレクタに合うHTMLコードを書いてください。セレクタのコードは以下の通りです：

cssp.bbb {
  color: red;
}

Задание 2

cssp .bbb {
  color: red;
}

Задание 3

css.eee p.bbb {
  color: red;
}

Задание 4

css.eee p .bbb {
  color: red;
}