Regardez un CSS simple :
DIV#divBox p span.red{color:red;} Selon la coutume, notre compréhension de ce CSS est que le navigateur recherche d'abord l'élément DIV avec l'identifiant de divBox. .Une fois trouvé Ensuite, recherchez tous les éléments p en dessous, puis recherchez tous les éléments span. Lorsqu'il s'avère que la classe span est rouge, appliquez le style. Un principe si simple et facile à comprendre, mais cette compréhension est complètement opposée et fausse.
Principe de correspondance :
La correspondance CSS du navigateur ne recherche pas de gauche à droite, mais de droite à gauche. Par exemple, le DIV#divBox p span.red{color:red;} mentionné précédemment, la séquence de recherche du navigateur est la suivante :
Recherchez d'abord tous les éléments span avec class='red' dans le code HTML, puis recherchez à nouveau Vérifiez s'il y a un élément p dans son élément parent, puis déterminez s'il existe un élément div avec l'identifiant divBox dans l'élément parent de p Si les deux existent, il correspondra.
L'avantage de la recherche du navigateur de droite à gauche est de filtrer le plus tôt possible certaines règles de style et éléments non pertinents. Par exemple, le html et le css suivants :
