Prioridade de seletores descendentes em CSS

Em todas as lições anteriores, todos os seletores precisavam capturar o próprio elemento. Pode acontecer que um seletor capture o elemento, e um segundo seletor capture o pai desse elemento.

Você já sabe que se uma cor, por exemplo, for definida para o elemento pai, essa cor será herdada pelo elemento descendente. Mas, se uma cor também for definida para o descendente, o seletor do descendente terá prioridade maior do que o seletor do pai.

Isso significa que o seletor de tag do descendente supera a classe do pai:

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

css.block {
  color: red;
}
p {
  color: green; /* esta cor será aplicada */
}

Результат:

O seletor de tag do descendente também supera o identificador (ID) do pai:

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

css#block {
  color: red;
}
.text {
  color: green; /* esta cor será aplicada */
}

Результат: