Cada navegador possui um motor de análise e renderização de HTML/CSS. Todos eles se esforçam em fazer com que a página seja mais rapidamente carregada e renderizada. Geralmente o processo é tão rápido que não se pode notar as fases em que isso ocorre (veja mais abaixo).
Por exemplo, o Chrome e o Opera aproveitaram o Webkit e usam o motor chamado Blink. O Safari usa o Webkit, o Internet Explorer usa o Trident, o Firefox usa o Gecko.
Esses motores de renderização possuem interpretadores CSS e analisadores de DOM e seguem os modelos do padrão W3C:
Esses modelos são interligados e independentes, mas separadamente não
são padrões de renderização de CSS.
Os navegadores baixam o HTML e o CSS do servidor e primeiro analisam e adicionam as tags HTML aos nós do DOM, criando uma árvore chamada árvore de conteúdo.
Fase 1:
Enquanto o HTML é analisado, o motor de renderização cria uma nova árvore chamada de árvore de renderização. Esta árvore representa os efeitos visuais com os quais os elementos serão exibidos.
Fase 2:
Após os processos acima, ambas as árvores passam pelo processo de layout, onde o navegador posiciona na área do documento cada nó (elemento). Isto é chamado pelo W3C de esquema de posicionamento, que instrui o navegador onde e como cada elemento deverá ser inserido, conforme 3 tipos: fluxo normal, floaters e posição absoluta.
Fase 3:
A fase final chamada painting (tradução livre, pintura). É o processo gradual onde o motor de renderização percorre a árvore de renderização aplicando todos os efeitos visuais, como tamanhos, cores etc.
Esta fase pode ser observada quando se abre uma página em uma conexão mais lenta, podendo ver os estilos visuais sendo aplicados conforme a página é renderizada.
Em relação à analise do exemplo:
.classe-A .class-B #id-A span p {
color: red;
}
A ordem de leitura, da direita pra esquerda (do filho ao pai) ou da esquerda pra direita (do pai ao filho) ao meu ver não faz muita diferença, já que se chega ao mesmo resultado, porém acho mais razoável e, na minha opinião, mais fácil, a leitura da esquerda para a direita, uma vez que o CSS é interpretado de cima pra baixo, de pai pra filho.
Fonte de pesquisa e interpretação.
p
que estiverem dentro de tudo aquilo, naquela ordem. É isso a dúvida??