Os seletores CSS são correspondidos pelos mecanismos do navegador da direita para a esquerda. Então, eles primeiro encontram as crianças e depois checam os pais para ver se elas correspondem ao restante das partes da regra.
- Por que é isso?
- É apenas porque a especificação diz?
- Isso afeta o layout final se for avaliado da esquerda para a direita?
Para mim, a maneira mais simples de fazer isso seria usar os seletores com o menor número de elementos. Portanto, os IDs primeiro (como devem retornar apenas 1 elemento). Então talvez classes ou um elemento que tenha o menor número de nós - por exemplo, pode haver apenas um período na página; portanto, vá diretamente para esse nó com qualquer regra que faça referência a um período.
Aqui estão alguns links para fazer backup de minhas reivindicações
- http://code.google.com/speed/page-speed/docs/rendering.html
- https://developer.mozilla.org/en/Writing_Efficient_CSS
Parece que isso é feito dessa maneira para evitar ter que olhar para todos os filhos dos pais (que podem ser muitos) e não para todos os pais de um filho que deve ser um. Mesmo que o DOM seja profundo, ele analisaria apenas um nó por nível, em vez de vários na correspondência RTL. É mais fácil / rápido avaliar os seletores CSS LTR ou RTL?
#foo
seletor precisará corresponder a todos esses nós. O jQuery tem a opção de dizer que $ ("# foo") sempre retornará apenas um elemento, porque eles estão definindo sua própria API com suas próprias regras. Mas os navegadores precisam implementar o CSS, e o CSS diz que corresponde a tudo no documento com o ID fornecido.
querySelectorAll
). Em outros casos, o Sizzle é usado. Sizzle não corresponde a vários IDs, mas o QSA (AYK). O caminho percorrido depende do seletor, do contexto e do navegador e sua versão. A API de consulta do jQuery usa o que eu chamei de "Primeiro nativo, abordagem dupla". Eu escrevi um artigo sobre isso, mas está em baixo. Embora você possa encontrar aqui: fortybelow.ca/hosted/dhtmlkitchen/JavaScript-Query-Engines.html