Anfängerfehler im Nachfahrenselektor

Schauen Sie sich den folgenden Selektor an:

p.eee {
	color: red;
}

Sie sollten bereits wissen, dass ein solcher Selektor Absätze mit der Klasse eee auswählt. Zum Beispiel diese:

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

Schauen Sie sich nun diesen Selektor an:

p .eee {
	color: green;
}

Dieser Selektor unterscheidet sich vom vorherigen dadurch, dass zwischen dem Tag-Namen und dem Klassennamen ein Leerzeichen steht. Dieses Leerzeichen stellt den Nachfahrenselektor dar. Das bedeutet in diesem Fall, dass wir alle Elemente mit der Klasse eee auswählen, die sich innerhalb von Absätzen befinden. Zum Beispiel wird dieser Selektor die folgenden Spans auswählen:

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

Ergebnis der Codeausführung:

Also, noch einmal: p.eee - ein solcher Selektor wählt Absätze mit der Klasse eee aus. Wenn ich aber so mache: p .eee, dann wähle ich alle Elemente mit der Klasse eee aus, die sich innerhalb von Absätzen befinden. Spüren Sie diesen Unterschied.

Erklären Sie, was der Selektor im unten angegebenen Code auswählt. Schreiben Sie dann einen HTML-Code, der zu diesem Selektor passt. Hier ist der Code mit dem Selektor:

p.bbb {
	color: red;
}

Erklären Sie, was der Selektor im unten angegebenen Code auswählt. Schreiben Sie dann einen HTML-Code, der zu diesem Selektor passt. Hier ist der Code mit dem Selektor:

p .bbb {
	color: red;
}

Erklären Sie, was der Selektor im unten angegebenen Code auswählt. Schreiben Sie dann einen HTML-Code, der zu diesem Selektor passt. Hier ist der Code mit dem Selektor:

.eee p.bbb {
	color: red;
}

Erklären Sie, was der Selektor im unten angegebenen Code auswählt. Schreiben Sie dann einen HTML-Code, der zu diesem Selektor passt. Hier ist der Code mit dem Selektor:

.eee p .bbb {
	color: red;
}