Conquiste seletores CSS avançados

Autor：Eve Cole Data da Última Atualização：2009-09-07 21:27:44

Artigo original: Conquiste seletores CSS avançados
Traduzido de:Domando Seletores CSS Avançados

CSS é uma das ferramentas mais poderosas disponíveis para web designers. Com ele podemos alterar a interface de um site em poucos minutos sem alterar as tags da página. Mas apesar de cada um de nós perceber que é útil, os seletores CSS estão longe de atingir seu potencial, e às vezes tendemos a usar classes, ids, divs, spans, etc. excessivos e inúteis.

A melhor maneira de evitar essas pragas em suas tags e mantê-las concisas e semânticas é usar seletores CSS mais complexos que possam atingir elementos específicos sem usar classes ou ids extras, e dessa forma também podemos tornar nosso código e estilos mais flexíveis .

Prioridade CSS

Antes de nos aprofundarmos no domínio dos seletores CSS avançados, é importante entender como funcionam as prioridades CSS para que possamos saber como usar nossos seletores de maneira adequada e evitar perder muito tempo depurando algo, desde que prestemos atenção às prioridades. para resolver o problema se

Quando escrevemos CSS devemos estar cientes de que alguns seletores serão superiores a outros seletores na cascata. O seletor que escrevemos no final não substituirá necessariamente os estilos que escrevemos anteriormente no mesmo elemento.

Então, como você calcula a prioridade de um determinado seletor ? É muito simples se você considerar que as prioridades são expressas como quatro números separados por vírgulas, como: 1, 1, 1, 1 ou 0, 2, 0, 1

O primeiro número (a) geralmente é 0, a menos que o atributo style seja usado na tag;
O segundo número (b) é a soma do número de ids no seletor;
O terceiro número (c) é o total de outros seletores de atributos e pseudoclasses usados neste seletor. Isso inclui classe (.example) e seletor de atributos (como li[id=red]);
O quarto número (d) conta elementos (como tabela, p, div, etc.) e pseudoelementos (como: primeira linha, etc.);
O seletor universal (*) tem prioridade 0;
Se dois seletores tiverem a mesma precedência, o último na folha de estilo terá efeito.

Vejamos alguns exemplos para ficar mais fácil de entender:

#barra lateral h2 — 0, 1, 0, 1
h2.título — 0, 0, 1, 1
h2 + p — 0, 0, 0, 2
#barra lateral p:primeira linha — 0, 1, 0, 2

No exemplo abaixo, o primeiro funcionará porque tem prioridade maior que o segundo:

#barra lateral p#primeiro { cor: vermelho } — 0, 2, 0, 1
#barra lateral p:primeira linha { cor: azul } — 0, 1, 0, 2;

É importante ter pelo menos um entendimento básico de como funcionam as prioridades, mas algumas ferramentas como o Firebug, quando inspecionamos um elemento específico, listam todos os pares de seletores CSS em ordem de prioridade do seletor para nos informar qual deles está em um elemento específico. é útil para que os seletores sejam válidos.

Isso torna muito fácil ver qual seletor está agindo em um elemento.

Artigos úteis: