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

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

p.eee {
	color: red;
}

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

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

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

p .eee {
	color: green;
}

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

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

コードの実行結果：

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

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

p.bbb {
	color: red;
}

p .bbb {
	color: red;
}

.eee p.bbb {
	color: red;
}

.eee p .bbb {
	color: red;
}