17 lines
1.9 KiB
Plaintext
17 lines
1.9 KiB
Plaintext
---
|
|
title: 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`.
|