. Hierarquia especificidade CSS: o que você precisa saber - Tudo Sobre Tecnologia

Ryan Boudreaux aborda os conceitos básicos sobre a hierarquia especificidade CSS em um esforço para tornar este conceito complicado, mais fácil de entender. 
Se uma regra CSS não parece funcionar quando parece que ele deve e seu código parece estar escrito corretamente, ou talvez um elemento que você está tentando estilo não se aplica em qualquer navegador, suas regras CSS está sofrendo de uma CSS conflito especificidade.Embora o conceito não é novo para o desenvolvedor web paisagem, ainda é provavelmente um dos mais difíceis de entender. Vou explicar a hierarquia especificidade CSS de uma maneira que esperamos que torna mais fácil de entender e, em seguida, apresentar vários exemplos.

Hierarquia especificidade CSS

Especificidade, conforme estipulado pelo W3C é calculado primeiro separar o Seletores CSS e regras em quatro categorias ou grupos, e em seguida, atribuindo a cada grupo um ranking que atribui um valor ponderado. Para fins de representação gráfica, o primeiro agrupamento categorizados no lado esquerdo tem um valor mais elevado de especificidade, e como os agrupamentos se move da esquerda para a direita, os valores de especificidade continuam a diminuir, com o último agrupamento tendo o valor mínimo especificidade. A especificidade é baseada apenas na forma do selector.
Para cada regra CSS, então você concatenar as quatro figuras ABCD em um sistema simples mnemônico base grande numeração para fins de notação para determinar o valor de especificidade. Os quatro grupos de seletores e seus valores de especificidade associados e expressões de valor opcionais estão listados abaixo.
O W3C calcula especificidade de um selector de como se segue:
  • A. Conde se um elemento tem uma regra de estilo in-line e aplicar o valor 1,0,0,0 ou A = 1, B = 0, C = 0, D = 0 ou x, 0,0,0.
  • B. Conte o número de atributos de identificação no selector e aplicar o valor para cada 0,1,0,0 ou A = 0, B = 1, C = 0, D = 0 ou 0, x, 0,0.
  • C. Conte o número de classes, pseudo-classes, e outros atributos no seletor e aplicar o valor 0,0,1,0 para cada ou A = 0, B = 0, C = 1, D = 0 ou 0, 0, x 0.
  • D. Conte o número de nomes de elementos e pseudo-elementos no seletor e aplicar o valor 0,0,0,1 para cada ou A = 0, B = 0, C = 0, D = 1 ou 0,0,0 , x.
Com licença artística e inspiração a cargo de Chris Coyier sobre o assunto , meu gráficoFigura A ilustra os seletores CSS agrupamentos e especificidade, mostrando seu posicionamento associado, a sua figura de caráter associado, um exemplo de cada tipo de seletor, o tipo de seletor, e seu lugar ao longo da escala especificidade.
Figura A
CSSSpecificityFigA110513.gif
Dada a natureza da especificidade CSS, o estilo in-line atribui sempre vencer e substituir qualquer outro atributo ou elementos. Qualquer atributo ID será sempre superar um atributo de classe ou pseudo-classe, na verdade, qualquer número de atributos de classe será sempre vencido por qualquer um ID. Com efeito, um seletor com um valor maior especificidade sempre superar um seletor com um valor menor especificidade.

Exemplos de especificidade CSS

Os exemplos abaixo ajudarão a ilustrar cada um dos seletores CSS e especificidade em ação.

Atributo de cor dentro de um estilo substituições elemento de parágrafo em linha no CSS externo

A in-line atributo cor estilo para o conteúdo do parágrafo sombra verde é ilustrado no trecho de código:
  <p style="color:#060;"> 
Este exemplo de estilo in-line tem um valor especificidade 1,0,0,0 e substituirá qualquer CSS local ou externo, que é aplicado para o atributo cor dentro desse elemento parágrafo. Mesmo se colocar em um estilo de parágrafo dentro de qualquer elemento CSS externo com um atributo de cor, ele sempre continuará a ser a sombra verde para esse parágrafo. Porque um elemento tem um valor de especificidade de 0,0,0,1, neste caso, o elemento n fica sobreposta pela modelo em linha com um valor de especificidade de 1,0,0,0.
No exemplo acima, eu definir o ponto de amostra com o estilo in-line e, em seguida, aplicar uma cor azul a todos os elementos de parágrafo dentro da folha de estilo externa. O trecho de código do CSS externo ea saída resultante, tanto para o estilo in-line eo elemento parágrafo são exibidas na Figura B como visto no navegador Chrome.
Figura B
p {color: # 06F;}
 
CSSSpecificityFigB110513.gif

Atributo ID substitui atributo de classe

Neste exemplo, eu demonstrar como um atributo ID irá substituir um atributo de classe ligada a partir de um arquivo CSS externo quando aplicada a um recipiente <section> amostra. A seguir, dois trechos de código CSS para a oferta "quadro" dois estilos distintos.
O ID: 
# SidebarID {float: left; width: 50%; background: # 0FC; padding-bottom: 5px;}
A Class: 
. Sidebar1 {float: left; width: 25%; background: # CCC; padding-bottom: 10px;}
E o seguinte trecho de código HTML para o <section> é exibido abaixo:
<section class="sidebar1" id="sidebarID">
Quando tanto a classe e ID são aplicados para a secção como codificados no código HTML exibida acima, o selector de ID vence uma vez que tem um valor de especificidade de 0,1,0,0, e o selector de classe tem um valor de 0,0 , 1,0. O <section> resultante como exibido no navegador Chrome é exibido na Figura C com o ID primordial selector aplicada.
Figura C
CSSSpecificityFigC110513.gif
Quando o ID não é aplicada e da classe é chamado dentro do <section> por si só, resulta no seguinte, como mostrado no navegador Chrome ( Figura D ).
Figura D
CSSSpecificityFigD110513.gif

Mais CSS exemplo cálculos especificidade

Para fins de demonstração vou listar alguns exemplos de combinações seletor CSS e seus resultados especificidade resultante, o que também vai ajudar na compreensão de como os valores são aplicados em situações e seqüências particulares. Estes seletores CSS exemplo pode ser encontrado na calculadora Especificidade CSS .
html> body - Dois elementos representados como um valor especificidade 0,0,0,2.
    
# Corpo - Um ID representado como um valor especificidade 0,1,0,0.
  
# Body.frontpage.default - Uma identificação e duas classes representadas como um valor de especificidade de 0,1,2,0.
 
div # main-content um: o foco - Um ID, uma classe, e dois elementos representados como 0,1,1,2.
   
- 42 classes representadas como 0,0,42,0.
 

Recursos adicionais sobre as regras a especificidade CSS

  • Calculadora Especificidade CSS :  A calculadora tem as suas limitações, uma vez que não pode incluir estilos in-line, no entanto, você pode colar trechos CSS do seu código e executar a calculadora para ver a saída, com opções para mostrar os detalhes de como os resultados foram calculados.
  • Calculando a especificidade de um seletor : Esta é a especificação W3C para o cálculo da CSS seletores especificidade.
  • Especificidade CSS :  O site fornece um infográfico exclusivo com ícones que representam várias combinações de seletores, juntamente com uma lenda, uma seção Sobre e links para a Conferência CSS Dev. 

Sobre Ryan Boudreaux

Ryan já se apresentou em uma ampla gama de funções de suporte de tecnologia para serviços públicos de eletricidade geração, incluindo usinas nucleares, e para a indústria de telecomunicações. Ele trabalhou no desenvolvimento web para a indústria do restaurante e do g Federal ...

0 comentários Goocle+ 0 Facebook

Postar um comentário

 
Tudo Sobre Tecnologia © 2013-2020. Todos os direitos reservados. Tudo Sobre Tecnologia. Desenvolvido por TST
Topo