Pesquisando a especificidade, me deparei com este blog - http://www.htmldog.com/guides/cssadvanced/specificity/
Ele afirma que a especificidade é um sistema de pontuação para CSS. Diz-nos que os elementos valem 1 ponto, as classes valem 10 pontos e os IDs valem 100 pontos. Além disso, também diz que esses pontos são totalizados e o valor total é a especificidade do seletor.
Por exemplo:
body = 1 point
body .wrapper = 11 pontos
body .wrapper #container = 111 pontos
Portanto, usando esses pontos, espero que os seguintes CSS e HTML resultem no texto sendo azul:
#a {
color: red;
}
.a .b .c .d .e .f .g .h .i .j .k .l .m .n .o {
color: blue;
}<div class="a">
<div class="b">
<div class="c">
<div class="d">
<div class="e">
<div class="f">
<div class="g">
<div class="h">
<div class="i">
<div class="j">
<div class="k">
<div class="l">
<div class="m">
<div class="n">
<div class="o" id="a">
This should be blue.
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>Por que o texto é vermelho quando 15 classes equivalem a 150 pontos em comparação com 1 ID, que é igual a 100 pontos?
Aparentemente, os pontos não são apenas totalizados; eles são concatenados. Leia mais sobre isso aqui - http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html
Isso significa que as classes em nosso seletor = 0,0,15,0OR 0,1,5,0?
(meus instintos me dizem que é o primeiro, como sabemos aparência especificidade do seletor de ID como este: 0,1,0,0)
Respostas:
A resposta de Pekka é praticamente correta e provavelmente a melhor maneira de pensar sobre o assunto.
No entanto, como muitos já apontaram, a recomendação do CSS do W3C afirma que "concatenar os três números abc (em um sistema numérico com uma base grande) fornece a especificidade". Então, o nerd em mim só tinha que descobrir quão grande é essa base.
Acontece que a "base muito grande" empregada (pelo menos pelos 4 navegadores mais usados * ) para implementar esse algoritmo padrão é 256 ou 2 8 .
O que isto significa é que um estilo especificado com 0 ids e 256 de classe-nomes irá sobrepor-se um estilo especificado com apenas 1 id. Eu testei isso com alguns violinos:
... e 256 nomes de tags são suficientes para substituir um nome de classe
... mas, infelizmente, 256 IDs não são suficientes para substituir um estilo embutido (Atualizado em 2012/8/15 - você precisará usar
!important)Portanto, existe efetivamente um "sistema de pontos", mas não é a base 10. É a base 256. Eis como funciona:
(2 8 ) 2 ou 65536, vezes o número de IDs no seletor
+ (2 8 ) 1 ou 256, vezes o número de nomes de classes no seletor
+ (2 8 ) 0 ou 1, vezes o número de tags- nomes no seletor
Isso não é muito prático para exercícios de retaguarda para comunicar o conceito.
Provavelmente é por isso que os artigos sobre o assunto estão usando a base 10.
***** [Opera usa 2 16 (veja o comentário de karlcow). Alguns outros mecanismos seletores usam infinito - efetivamente, nenhum sistema de pontos (veja o comentário de Simon Sapin).]
Atualização, julho de 2014:
Como o Blazemonger apontou no início do ano, os navegadores webkit (chrome, safari) agora parecem usar uma base superior a 256. Talvez 2 16 , como o Opera? O IE e o Firefox ainda usam 256.
fonte
Boa pergunta.
Não sei ao certo - todos os artigos que consigo encontrar evitam o exemplo de várias classes, por exemplo, aqui -, mas presumo que, quando se trata de comparar a especificidade entre um seletor de classe e um ID , a classe é calculada com um valor de
15apenas, não importa quão detalhado seja.Isso corresponde à minha experiência em como a especificidade se comporta.
No entanto, deve haver algum empilhamento de classes porque
é mais específico que
a única explicação que tenho é que a especificidade das classes empilhadas é calculada apenas entre si, mas não com os IDs.
Atualização : eu meio que peguei agora. Não é um sistema de pontos, e as informações sobre as classes com peso de 15 pontos estão incorretas. É um sistema de numeração de 4 partes muito bem explicado aqui .
O ponto de partida é de 4 figuras:
De acordo com a explicação do W3C sobre a especificidade , os valores de especificidade para as regras acima mencionadas são:
este é um sistema de numeração com uma base muito grande (indefinida?).
Meu entendimento é que, como a base é muito grande, nenhum número na coluna 4 pode superar um número> 0 na coluna 3, o mesmo para a coluna 2, coluna 1 .... Isso está correto?
Eu estaria interessado em saber se alguém com uma melhor compreensão de matemática do que eu poderia explicar o sistema de numeração e como convertê-lo em decimal quando os elementos individuais forem maiores que 9.
fonte
O atual Rascunho de Trabalho dos Seletores Nível 4 faz um bom trabalho ao descrever a Especificidade no CSS:
Isso significa que os valores A, B e C são completamente independentes um do outro.
15 classes não dão ao seu seletor uma pontuação de especificidade de 150, ele fornece um valor B de 15. Um único valor A é suficiente para superar isso.
Como metáfora, imagine uma família de 1 avô, 1 pai e 1 filho. Isso pode ser representado como 1,1,1 . Se o pai ou mãe tem 15 filhos, isso de repente não faz dele outro pai ( 1,2,0 ). Isso significa que os pais têm uma responsabilidade muito maior do que eles com apenas um filho ( 1,1,15 ). ;)
A mesma documentação também diz:
Isso foi adicionado para resolver o problema apresentado na resposta de Faust , em que as implementações de CSS em 2012 permitiram que os valores de especificidade transbordassem entre si.
Em 2012, a maioria dos navegadores implementava uma limitação de 255, mas essa limitação podia exceder. 255 classes tiveram uma especificidade A, B, c de 0,255,0 , mas 256 classes transbordaram e tiveram uma pontuação A, B, c de 1,0,0 . De repente, nosso valor B se tornou nosso valor A. A documentação dos seletores de nível 4 irradia completamente esse problema, afirmando que o limite nunca pode exceder. Com essa implementação, as classes 255 e 256 teriam a mesma pontuação A, B, c de 0,255,0 .
O problema dado na resposta de Faust já foi corrigido na maioria dos navegadores modernos.
fonte
Atualmente, estou usando o livro CSS Mastery: Advanced Web Standards Solutions .
O Capítulo 1, página 16, diz:
(ênfase minha) e
Continua dizendo que você pode fazer o cálculo frequentemente na base 10, mas apenas se todas as colunas tiverem valores menores que 10.
Nos seus exemplos, os IDs não valem 100 pontos; cada um vale
[0, 1, 0, 0]pontos. Portanto, um ID supera 15 classes porque[0, 1, 0, 0]é maior do que[0, 0, 15, 0]em um sistema de números de base alta.fonte
Gosto da comparação do ranking de especificidade com a tabela de medalhas dos Jogos Olímpicos (primeiro método de ouro - baseado primeiro no número de medalhas de ouro, depois prata e depois bronze).
Também funciona com sua pergunta (grande número de seletores em um grupo de especificidade). A especificidade considerou cada grupo separadamente. No mundo real, raramente vi casos com mais de uma dúzia de seletores).
Também há uma calculadora de especificidade bastante boa disponível aqui . Você pode colocar seu exemplo (#a e .a .b .c .d .e .f .g .h .i .j .k .l .m .n .o) lá e ver os resultados.
Exemplo da tabela de medalhas dos Jogos Olímpicos Rio 2016
fonte
Não acredito que a explicação do blog esteja correta. A especificação está aqui:
http://www.w3.org/TR/CSS2/cascade.html#specificity
Os "pontos" de um seletor de classe não podem ser mais importantes do que um seletor de "id". Simplesmente não funciona assim.
fonte
Eu diria que:
Eu acho que eles só empilham dependendo do que você recebe se for múltiplo do mesmo. Portanto, uma Classe sempre substituirá o elemento e o ID sempre sobre a Classe, mas se estiver abaixo de qual dos 4 elementos em que 3 é azul e 1 é vermelho, será azul.
Por exemplo:
Deve ficar vermelho.
Veja o exemplo http://jsfiddle.net/RWFWq/
"se as quintas disserem vermelho e as três disserem azul, vou ficar vermelha"
fonte