Basicamente, a regra seguida é a da "especificidade":
https://www.w3.org/TR/css3-selectors/#specificity
A especificidade é calculada da seguinte forma:
- O seletor universal
*
é ignorado.
a
= número de IDs em cada seletor;
b
= número de seletores de classes, atributos e pseudoclasses;
c
= número de seletores de tipo e pseudoelementos;
- estilos inline (
style=""
) tem mais prioridade que as 3 condições acima.
Usando os valores a-b-c você obtém o índice de classificação (vale o maior):
┌── maior especificidade
┌─┴─┐
1-0-3 > 0-14-5 > 0-2-1 > 0-0-12
└─┬──┘
menor especificidade ──┘
Quando os índices forem iguais, prevalece o último definido no CSS, respeitando a "cascata".
Exemplos:
* /* a=0 b=0 c=0 -> especificidade = 0 */
LI /* a=0 b=0 c=1 -> especificidade = 1 */
UL LI /* a=0 b=0 c=2 -> especificidade = 2 */
UL OL+LI /* a=0 b=0 c=3 -> especificidade = 3 */
H1 + *[REL=up] /* a=0 b=1 c=1 -> especificidade = 1-1 */
UL OL LI.red /* a=0 b=1 c=3 -> especificidade = 1-3 */
LI.red.level /* a=0 b=2 c=1 -> especificidade = 2-1 */
#x34y /* a=1 b=0 c=0 -> especificidade = 1-0-0 */
#s12:not(FOO) /* a=1 b=0 c=1 -> especificidade = 1-0-1 */
style="..." /* a=0 b=0 c=0 -> especificidade = 1-0-0-0 */
Notas:
- Se ocorrer repetição do mesmo seletor simples, a especificidade também aumenta (cada ocorrência é contabilizada).
- a declaração dentro de
style=""
é considerada como 1-0-0-0
para fins de cálculo, sendo mais específica que o CSS do id
do elemento, por exemplo.
- usar
!important
após uma definição tem prioridade sobre todas as outras declarações (caso tenha mais de um !important
, o critério de desempate segue as regras já mencionadas)
- se o
!important
for aplicado num atalho como background:
, vale como se tivesse sido aplicado em todos os sub-ítens do atalho (background-color
, background-position
etc)
Aplicado ao seu caso:
#element p{color:blue;} /* 1-0-1 */
.element p{color:red;} /* 1-1 */
div p{color:pink;} /* 2 */
div.element p{color:yellow;} /* 1-2 */
div[name="element"] p{color:purple;} /* 1-2 */
div p:first-child{color:brown;} /* 1-2 */
div p:nth-child(1){color:white;} /* 1-2 */
Ferramenta para cálculo online:
http://specificity.keegan.st/
Veja também:
Qual a prioridade do HTML? "id" ou "class"?
div p
não deu ficoupink
. Mas boa parte dessa questão tem respondida aqui Qual a prioridade do HTML? “id” ou “class”?.#element p
é mais específico do que uma div qualquer seguida de p, por isso prevalece o blue ao pink.