Mesma especificidade, após levar em consideração a colocação: a primeira letra sempre vence?
Dê uma olhada neste jsfiddle:http://jsfiddle.net/ZNddz/
.intro:first-letter {
font-size: 130px;
}
span.letter {
background-color: red;
font-size: 30px;
}
p {
font-size: 80px;
}
A primeira regra consiste em um seletor de classe e umpseudo-element
seletor = 11
A segunda regra consiste em um seletor de classe.letter
e um seletor de tagsspan
= 11
Ambas as regras têm a mesma especificidade, portanto, é razoável acreditar que o vencedor deve ser o último estilo. Obviamente, não é o caso. Então eu decidi adicionar umbackground-color
propriedade para a segunda regra e como você pode ver, tem uma altura de 30px.
Eu deduzo disso que ambas as regras não estão selecionando o mesmo elemento. Mas é meio bizarro que eu queira ter uma explicação oficial para esse efeito.