O que é a especificidade do seletor CSS e como funciona?

O navegador determina quais estilos mostrar em um elemento, dependendo da especificidade das regras de CSS. Assumimos que o navegador já determinou as regras que correspondem a um elemento específico. Entre as regras correspondentes, a especificidade, quatro valores separados, a, b, c, d são calculados para cada regra com base nos seguintes:

1. a é se estilos inline estão sendo usados. Se a declaração de propriedade é um estilo embutido no elemento, a é 1, senão 0.
2. b é o número de seletores de ID.
3. c é o número de classes, atributos e seletores de pseudo-classes.
4. d é o número de tags e seletores de pseudo-elementos.

A especificidade resultante não é uma única pontuação numérica, mas uma matriz de valores que podem ser comparados por coluna. Ao comparar seletores para determinar qual tem a especificidade mais alta, olhar da esquerda para a direita e comparar o maior valor em cada coluna. Portanto, um valor na coluna 'b' irá substituir valores em colunas 'c' e 'd', não importa o que eles possam ser. Como tal, especificidade de 0, 1, 0, 0 seria maior que um de 0, 0, 10, 10.

Nos casos de igual especificidade: a última regra é a que conta. Se você escreveu a mesma regra em sua folha de estilo (independente da sua folha interna ou externa) duas vezes, então a regra inferior na sua folha de estilo está mais próxima do elemento a ser estilizado, Considera-se mais específico, pelo que será aplicado.

É uma melhor prática escrever regras de CSS com baixa especificidade, para que elas possam ser facilmente substituídas se necessário. Ao escrever o código da biblioteca de componentes CSS UI, é importante que eles tenham poucas especificidades, para que os usuários da biblioteca possam substituí-las sem usar regras CSS muito complicadas só para aumentar a especificidade ou recorrer a !important.