Aí você confere, confere e confere, começa a perder a paciência e começa a adicionar classes e id's pai até o CSS funcionar na marra. Por que isto acontece?
Bom, muita gente não sabe, mas seus navegadores têm um css próprio, tem o CSS do site e ainda por cima o CSS do usuário (quase ninguém utiliza, mas existe!). Alguma hora dá conflito entre as regras existentes no CSS e levanta a questão: Como esses conflitos são resolvidos?
Aí que entram as regras de especificidade, um conjunto de regras que determinam a prioridade de aparição do CSS.
Muitos web designers / frontend engineers desconhecem estas regras e isto acarreta em muitas horas de stress e vontade de abandonar a carreira dando uma carreira =].
A ordem básica é a seguinte:
- Declarações do navegador
- Declarações normais do usuário
- Declarações normais do autor
- Declarações !important do autor
- Declarações !important do usuário
Fora isso, temos uma tabela que dita a prioridade de declarações dentro dos nossos estilos. Didaticamente eu prefiro fazer um sistema de soma. É mais simples de entender. Então vamos lá:
- Estilos do navegador - O padrão do navegador, equivale a 0,1 pts.
- Seletor Universal (*) - Equivale a 0,5 pts
- tags HTML (h1,p,span,etc) - Equivalem a 1 pt
- Classes no HTML - Equivalem a 10pt
- ID's no HTML - Equivalem a 100pt
- Estilos inline (style="color: blue;" dentro da tag html) - Equivale a 1000pt
- !important - Superior a 1000 pontos. Dentro da propriedade no CSS, superam a inline comum do html.
Exceções:
- 10 id's não superam um inline
- uma diretiva !important dentro de um estilo inline, tende a sobrepor um !importante dentro do CSS
- Um pseudo-elemento ou pseudo-classe com !important superam um !important de uma declaração comum
Desempate: Caso ainda assim, duas declarações possuem a mesma pontuação, quem estiver aparecendo por último será demonstrado.
Agora vocês já descobriram o segredo para um CSS menos complicado, evitem o uso da diretiva !important a menos que seja necessário.
