<style type="text/css>
h1 { color : black }
em { color :red }
</style>

Cosa accade ora? Osserva:

<h1>Questa e' una riga nera</h1>
<h1>...E questa e' un' altr riga...<em>ma cosa?</em> Questa riga e' ROSSA!!</h1>

Ok, ma io volevo delle righe nere...I volevo che SOLAMENTE il testo all' interno dei tag <em> fosse rosso!

Percio', come puoi vedere, TUTTE le righe che contengono i tag <em> saranno colorate di rosso. Per evitare questo problema, puoi usare i selettori contestuali. Cosi', nell' esempio sopra, avresti potuto scrivere:

h1 em { color : red }

Infatti in questo modo, solo il testo all' interno dei tag <em> (contenuti pero' all' interno dei tag <h1>) sara' colorato di rosso:

<h1>Questa e' una <em>semplice</em>riga per mostrarti i selettori contestuali...</h1>