Σφάλμα αρχαρίων στον επιλογή απόγονων

Ρίξτε μια ματιά στον ακόλουθο επιλογέα:

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;
}