Sobes.tech
Middle

Por que os seletores em CSS são herdados em excesso?

sobes.tech IA

Resposta da IA

Os seletores em CSS não são herdados. A herança em CSS refere-se à transmissão de algumas propriedades de um elemento para os seus descendentes. Os seletores são padrões que escolhem elementos para aplicar estilos.

A herança pode significar que os estilos aplicados através de um seletor podem ser sobrescritos (herdados) por estilos aplicados através de outro seletor. Isto não está relacionado com a herança, mas com o mecanismo de cascata do CSS, que determina quais estilos são aplicados a um elemento quando várias regras CSS definem um valor para a mesma propriedade.

Fatores que influenciam a cascata e a "sobrescrita" de estilos:

  1. Especificidade (Specificity): Os seletores com maior especificidade têm maior peso.
  2. Ordem (Order): Quando a especificidade é igual, a regra declarada por último é aplicada.
  3. Importância (!important): As declarações marcadas com !important têm prioridade máxima (exceto pelos estilos incorporados do User Agent com !important).
  4. Origem dos estilos (Origin): Os estilos vêm de diferentes fontes (navegador, utilizador, autor).

Exemplo de especificidade:

/* Baixa especificidade */
p {
  color: blue;
}

/* Alta especificidade - irá sobrescrever a cor */
.text-section p {
  color: red;
}