Comprendre le principe de recherche et de correspondance du CSS pour rendre le CSS plus concis et plus efficace_Échange d'expérience

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 :

Copier le code Le code est le suivant :