Hierarquia de especificidade no CSS | Explicado
A especificidade no CSS determina a ordem dos seletores de CSS a serem aplicados a um elemento. Por exemplo, um elemento pode ser influenciado por vários estilos de CSS e, portanto, seria um desafio se ajustar a um estilo. O conceito de especificidade facilitou o processo de decidir qual propriedade CSS selecionar para um elemento. Para fazer isso, é seguida uma hierarquia de especificidade que define uma ordem de seletores de CSS de acordo com a pontuação da especificidade.
Este artigo fornece uma visão profunda da hierarquia de especificidade com os seguintes resultados de aprendizagem:
- Hierarquia de especificidade em CSS
- Como calcular a pontuação da hierarquia de especificidade
Hierarquia de especificidade em CSS
A hierarquia de especificidade é o principal ingrediente na prática de especificidade. A hierarquia de especificidade refere -se às categorias de seletores de CSS e sua ordem de execução no CSS. Os quatro grupos seguintes se referem
Estilos em linha: A propriedade de estilo usada dentro do elemento e a especificidade dos estilos em linha é maior do que todos os outros grupos.
Identificador (ID): O atributo de identificação de um elemento e a especificidade é um passo após os estilos em linha.
Aulas, pseudo -classes, atributos: Este grupo contém as classes, pseudo -classes (como: link,: ativo, foco) e outros atributos. O nível de especificidade deste grupo é um passo abaixo do grupo de identificadores.
Elementos, pseudo elementos: Este grupo contém elementos (p, h1, div) e pseudo elementos (:: antes, :: depois) . A especificidade deste grupo está no nível mais baixo.
Como calcular a pontuação da hierarquia de especificidade
Por trás do conceito de hierarquia de especificidade, existe um cálculo matemático que leva à quantificação da especificidade e à priorização do seletor de CSS com base nessa pontuação. A pontuação pode ser calculada seguindo a referência fornecida abaixo.
| Seletor CSS | Pontuação da hierarquia de especificidade |
|---|---|
| Estilos embutidos | 1000 |
| Identificador (ID) | 100 |
| Classe, pseudo -classes, atributos | 10 |
| Elemento, elemento pseudo | 1 |
Exemplo 1: seletores CSS
O código a seguir pratica vários seletores CSS em um único elemento para entender o processo de hierarquia de especificidade no CSS.
Html
Linuxhint! Um vale de tutoriais
CSS
No código CSS acima, três seletores tentam alterar a cor de fundo do elemento H3. O primeiro seletor usa o nome do elemento, enquanto o segundo e o terceiro seletores exercem a classe e o ID do elemento H3.
Saída
Como a especificidade do eu ia é maior que o aula e a elemento, Assim, o eu ia seria usado como seletor CSS.
Exemplo 2: Usando seletores de CSS híbridos
Pode haver um caso em que você tenha que definir classes com os mesmos nomes. Nesse cenário, os seletores híbridos são exercidos para identificar exclusivamente um elemento específico. O exemplo a seguir usa o id e classe Para criar um seletor híbrido.
Html
Linuxhint! Um vale de tutoriais
Tutoriais sobre HTML, CSS, Java, JQuery e JavaScript
Bem -vindo ao Linuxhint
Um provedor de conteúdo de qualidade
No código acima, dois div são criados e cada div tem H3 com class = ”spec” e p com class = ”spec1". elementos.
CSS
No CSS acima, o #New .especificação refere -se ao elemento H3 do div id = "novo", enquanto o .SPEC refere -se a todos os elementos que têm class = ”spec”.
Tendo em mente os cálculos, o "#novo ".Spec "e".spec ” tem a seguinte pontuação.
- #novo .Spec = 100+10 = 110
- .Spec = 10
Saída
A partir da saída, observa -se que o seletor CSS “#Div .spec ” foi carregado como sua especificidade é maior que ““.spec ”.
Conclusão
A hierarquia de especificidade define a ordem dos seletores de CSS, o seletor com maior pontuação de especificidade tem uma prioridade mais alta em comparação com o seletor com menor escore de especificidade. Neste artigo, demonstramos o conceito de hierarquia de especificidade e descrevemos o básico de como a hierarquia da especificidade é definida. Os estilos embutidos têm a pontuação mais alta de especificidade e, portanto, são colocados no topo da árvore de hierarquia de especificidade, seguida de ID, classes e elemento. Além disso, também fornecemos o método para calcular a pontuação de especificidade dos seletores de CSS.