Interprete a prioridade CSS para você

Antes de falar sobre prioridade CSS, precisamos entender o que é CSS e para que serve.

Primeiro, vamos dar uma breve explicação sobre CSS: CSS é a abreviatura de Cascading Style Sheets. Suas especificações representam um estágio único de desenvolvimento na história da Internet. Hoje em dia, para os amigos que se dedicam à produção de páginas web, poucos devem ser os que nunca ouviram falar de CSS, pois muitas vezes precisamos utilizá-lo no processo de criação de páginas web.

Em segundo lugar: podemos definir uma aparência rica e fácil de modificar para o documento através de CSS para reduzir a carga de trabalho dos produtores de páginas web, reduzindo assim o custo de produção e pós-manutenção.

Na verdade, é completamente redundante falar sobre o que é CSS e quais são suas funções. Acredito que amigos que se dedicam à produção de páginas web já tenham sido mais ou menos expostos a ele.

Mais perto de casa, vamos entrar no assunto de hoje:

1. Qual é a prioridade CSS?

A chamada prioridade CSS refere-se à ordem em que os estilos CSS são analisados ​​no navegador.

2. Regras de prioridade CSS

Como os estilos têm prioridade, haverá uma regra para concordar com essa prioridade, e essa “regra” é o foco deste artigo.

A especificidade em uma folha de estilo descreve o peso relativo de diferentes regras. Suas regras básicas são:

1. Conte o número de atributos de ID no seletor.
2. Conte o número de atributos CLASS no seletor.
3. Conte o número de nomes de tags HTML no seletor.

Finalmente, escreva os três números na ordem correta sem adicionar espaços ou vírgulas para obter um número de três dígitos (css2.1 usa 4 dígitos). (Observe que você precisa converter o número em um número maior que termine em três dígitos). A lista final de números correspondentes ao seletor facilita a determinação de quais recursos do número mais alto substituem os do número mais baixo.

Por exemplo:

1. Para cada seletor de ID (#someid), adicione 0,1,0,0.
2. Adicione 0,0,1,0 a cada seletor de classe (.someclass), cada seletor de atributo (formulário como [attr=value], etc.) e cada pseudoclasse (formulário: hover, etc.).
3. Para cada elemento ou pseudoelemento (:firstchild), etc., adicione 0,0,0,1.
4. Outros seletores incluem o seletor global *, mais 0,0,0,0. Equivale a não adicionar, mas também é uma espécie de especificidade, que será explicada mais adiante.

3. Lista seletora para classificação de recursos

Aqui está uma lista de seletores classificados por atributo:

A julgar apenas pela tabela acima, parece difícil de entender. Aqui está outra tabela:

Pelo exposto, pode-se ver facilmente que o peso da tag HTML é 1, o peso da CLASS é 10, o peso do ID é 100 e o peso herdado é 0 (será discutido mais tarde).

Adicione as sequências de números pouco a pouco de acordo com essas regras para obter o peso final e, em seguida, compare-as pouco a pouco, da esquerda para a direita, ao comparar e escolher.

A questão de prioridade é na verdade uma questão de resolução de conflitos. Quando o mesmo elemento (conteúdo) é selecionado pelo seletor CSS, diferentes regras CSS devem ser escolhidas de acordo com a prioridade.

Dito isto, temos que falar sobre a herança do CSS.