Priorità dei selettori discendenti in CSS

In tutte le lezioni precedenti, tutti i selettori dovevano catturare l'elemento stesso. Può succedere che un selettore catturi un elemento, mentre un secondo selettore catturi il genitore di quell'elemento.

Sapete già che se a un genitore è assegnato, ad esempio, un colore, quel colore sarà ereditato dal discendente. Ma, se anche al discendente è assegnato un colore, il selettore del discendente avrà una priorità maggiore rispetto al selettore del genitore.

Ciò significa che il selettore di tag del discendente batte la classe del genitore:

html<div class="block">
  <p>testo</p>
</div>

css.block {
  color: red;
}
p {
  color: green; /* si applicherà questo colore */
}

Результат:

Il selettore di tag del discendente batte anche l'identificatore del genitore:

html<div id="block">
  <p class="text">testo</p>
</div>

css#block {
  color: red;
}
.text {
  color: green; /* si applicherà questo colore */
}

Результат: