O que sabes sobre a especificidade dos seletores CSS…

A especificidade determina a prioridade das regras CSS em caso de conflito, quando estilos diferentes são aplicados ao mesmo elemento. É calculada para cada seletor na regra.

A especificidade é uma avaliação numérica composta por quatro categorias (A, B, C, D), escrita como 0,0,0,0. Quanto maior o número, maior a especificidade.

Categorias:

A (estilo inline): Estilos definidos pelo atributo style no elemento HTML. Têm a maior especificidade (por exemplo, 1,0,0,0).
B (ID): Seletor por ID (por exemplo, #meu-id). Aumenta o segundo dígito (por exemplo, 0,1,0,0).
C (Classe, Atributo, Pseudo-classe): Seletor por classe (por exemplo, .minha-classe), atributo (por exemplo, [type="text"]), pseudo-classe (por exemplo, :hover, :first-child). Aumenta o terceiro dígito (por exemplo, 0,0,1,0).
D (Elemento, Pseudo-elemento): Seletor por elemento HTML (por exemplo, div, p) e pseudo-elementos (por exemplo, ::before, ::after). Aumenta o quarto dígito (por exemplo, 0,0,0,1).

Exemplo de cálculo:

p - 0,0,0,1
.minha-classe - 0,0,1,0
#meu-id - 0,1,0,0
div p - 0,0,0,2 (soma das especificidades de dois elementos)
#meu-id .minha-classe - 0,1,1,0 (soma da ID e da classe)
div#meu-id.minha-classe:hover - 0,1,2,1 (soma da tag, ID, classe e pseudo-classe)

Regras:

A especificidade do estilo inline é sempre maior que qualquer combinação de outros seletores, exceto regras com a flag !important.
Regras com a flag !important têm prioridade máxima, sobrescrevendo até o estilo inline. O uso de !important não é recomendado devido à complexidade na depuração.
Em caso de especificidade igual, a regra declarada por último no arquivo CSS é aplicada.
O seletor universal (*) e :where() têm especificidade 0,0,0,0 e não aumentam a especificidade total.

/*
  Especificidade: 0,0,0,1
  Será aplicado se não houver regras mais específicas
*/
p {
  color: blue;
}

/*
  Especificidade: 0,0,1,0
  Substituirá a regra para a tag p
*/
.text {
  color: green;
}

/*
  Especificidade: 0,1,0,0
  Substituirá a regra para a classe .text
*/
#texto-principal {
  color: red;
}

/*
  Especificidade: 1,0,0,0
  Será aplicado se o elemento tiver o atributo style="color: purple;"
*/
/* <p style="color: purple;">Texto</p> */

/*
  Especificidade muito alta, substituirá tudo
  Não é recomendado usar sem necessidade extrema
*/
.override-text {
  color: black !important;
}

O que sabes sobre a especificidade dos seletores CSS?