Il colore del titolo qui sopra è bianco e non rosso o verde perché l'indicazione di un id ha un peso specifico maggiore di una classe, che a sua volta pesa più di un semplice elemento. La terza regola CSS prevale sulle altre due.
<h3 id="titolo-h3" class="titolo">Titolo</h3>
h3 {color: red;}
.titolo {color: green;}
#titolo-h3 {color: white;}
A questo paragrafo assegniamo la classe par: <p class="par"></p>. Come si vede esso è bianco e non rosso. Se facciamo il calcolo della specificità avremo 0-1-1 per la prima regola, mentre per la seconda, con la semplice classe, abbiamo 0-1-0.
<p class="par">A questo paragrafo assegniamo [...]</p>
p.par {color: white;}
.par {color: red;}