Especificidade no CSS
O CSS pode ser aplicado a qualquer elemento de várias maneiras (em linha, interno e externo). E se aplicarmos estilos ao mesmo elemento por meios diferentes (usando embutido, usando id ou classe, etc)? Nesse caso, o fenômeno da especificidade do CSS entra em prática e escolhe o seletor CSS que tem maior valor de especificidade. O conceito de especificidade é como a precedência do operador em linguagens de programação.
Tendo em vista a importância da especificidade, este guia demonstra brevemente o trabalho e o uso da especificidade no CSS.
- Como funciona a especificidade do CSS
- Valor de especificidade dos seletores CSS
Como a especificidade funciona no CSS
O trabalho da especificidade depende dos seletores CSS ou do tipo de CSS que você está usando. Esta seção considera a comparação de especificidade das seguintes maneiras:
- CSS inline, CSS interno e CSS externo
- Seletores CSS (id, classe, pseudo -classes, pseudo elementos, etc.)
A folha de estilo pode estar embutida, interna ou externa e o seguinte é o nível de especificidade dessas folhas de estilo.
CSS em linha> CSS interno> CSS externoA partir da equação acima, conclui -se que o CSS em linha tem a maior especificidade em comparação com o CSS interno e externo.
Agora, vamos explorar como os estilos são escolhidos se houver vários seletores de CSS forem usados para o mesmo elemento. A especificidade de vários seletores de CSS é definida pela seguinte equação.
Inline> Identificador (ID)> Classes/Pseudo-Classes, Atributos> Elements/Pseudo ElementsAté agora, a comparação teórica foi retirada. Vamos ter uma comparação quantitativa da pontuação da especificidade e essa pontuação de especificidade é calculada pelos navegadores da seguinte maneira.
Para fazer isso, os, dezenas, centenas e milhares de conceito de contagem são aplicados nos seletores CSS para obter um valor específico. De modo que o menos seletor de especificidade (elemento) seja atribuído 1 e o mais alto seletor de especificidade (em linha) é atribuído 1000. A tabela a seguir refere -se à pontuação de especificidade de vários seletores de CSS.
| Seletor CSS | Especificidade |
|---|---|
| Em linha | 1000 |
| Identificador (ID) | 100 |
| Aulas, pseudo-classes, atributos | 10 |
| Elementos/pseudo elementos | 1 |
Praticamos alguns exemplos que são retirados do conceito fornecido na tabela acima.
| Seletores CSS | Exemplo | Valor de especificidade |
|---|---|---|
| Em linha | 1000 | |
| Elemento com id | H1#ID | 100+1 = 101 |
| Elemento com classe | H1.aula | 10+1 = 11 |
| Elemento | H1 | 1 |
| Elemento com ID e classe | H1#ID.aula | 1+100+10 = 111 |
| Várias classes | .classe 1.Classe2 | 10+10 = 20 |
Com a ajuda das informações fornecidas nas tabelas acima, você teria melhor entendido o conceito de especificidade no CSS. Vamos pavimentá -los usando os seguintes exemplos
Exemplo 1: Usando vários seletores CSS para um elemento
Este exemplo pratica vários seletores CSS para estilizar o elemento "P".
Html
Usando o conceito de especificidade
No código HTML acima, o parágrafo é atribuído id = "um" e class = "spec".
CSS
No CSS acima, o "Classe", "ID" e "Element" são usados como seletores CSS para "P". Cada seletor de CSS pretende alterar a cor de fundo do "P" elemento.
Saída
A partir da saída, observa-se que a cor do fundo é azul-celeste, que foi definida pelo id = "um" do elemento "p".
Exemplo 2: Usando seletores da mesma especificidade
Existe possibilidade de que um elemento esteja sendo abordado pelos seletores CSS que têm a mesma pontuação de especificidade. Nesse caso, a ocorrência do seletor de CSS é considerada e o seletor posterior é escolhido para estilo.
Este exemplo demonstra o mesmo cenário usando o seguinte código.
Html
Usando os seletores que têm a mesma especificidade
CSS
No código CSS acima, dois seletores de ID são usados com estilos diferentes. O #spec que ocorre anteriormente tem apenas propriedades coloridas em segundo plano, enquanto o #spec Ocorrendo posterior tem várias propriedades CSS.
Saída
Da saída, observa -se que o id = ”spec” O seletor que ocorre lateralmente é selecionado e as propriedades contidas por ele são aplicadas ao elemento de parágrafo.
Conclusão
Sempre que vários seletores CSS tentam influenciar um elemento, o fenômeno da especificidade decide qual estilo deve ser aplicado. A especificidade no CSS tem o papel principal como folhas de estilo complexas podem conter vários seletores para cada elemento. Este artigo demonstra o conceito de especificidade no CSS. Além disso, você também saberá como a pontuação de especificidade de um seletor de CSS é calculada. Com a ajuda disso, você seria capaz de calcular a pontuação de especificidade antes de usar qualquer seletor CSS.