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.

questionAnswers(2)

yourAnswerToTheQuestion