Dans quelle direction les sélecteurs CSS sont-ils validés?

Question

Je me souviens avoir regardé une vidéo en ligne qui était une conférence donnée par un ingénieur de Yahoo et dans laquelle il mentionnait que les sélecteurs CSS étaient lus par le navigateur, de droite à gauche et non de gauche à droite. Signification #body .header .links a tirerait réellement toutes les ancres sur la page en filtrant ceux avec un parent de classe links qui avait un parent de classe header qui avait un parent avec l'ID body.

Je ne trouve pas la vidéo et je me demandais si quelqu'un avait des références pour renforcer ou est-ce pas correct? Cela ne veut-il pas dire que quelque chose comme #body .header .links li a est en fait plus lent que de simplement dire #body .links a? En supposant que les deux fonctionnent sur une page donnée.

Answer 1

Je pense que cet article de blog va dans cette direction: Simplifying CSS Selectors

La clé pour l'optimisation des sélecteurs CSS est de se concentrer sur le sélecteur de droite, appelé aussi le sélecteur à clé (coïncidence?). Voici un sélecteur beaucoup plus cher: A.class0007 * {}. Bien que ce sélecteur semble plus simple, il est plus coûteux pour le navigateur de correspondre. Parce que le navigateur se déplace de droite à gauche, il commence par vérifier tous les éléments qui correspondent au sélecteur de clé, "*". Cela signifie que le navigateur doit essayer de faire correspondre ce sélecteur avec tous les éléments de la page. Ce tableau montre la différence de temps de chargement pour la page de test en utilisant ce sélecteur universel par rapport à la page précédente de test du sélecteur descendant.

Je ne l'ai pas lu en détail pour le moment (il est venu à moi comme une recommandation) mais il semble très bien.

Answer 2

Lorsque le navigateur correspond aux sélecteurs CSS, il vérifie si chaque règle s'applique à un élément spécifique. Il est donc naturel de valider les sélecteurs de droite à gauche.

Pour vérifier si le sélecteur #body .header .links a correspond à l'élément, il vérifie d'abord si elle est un élément a, alors s'il y a un parent avec la classe links, alors si cet élément a un parent avec la classe header, alors si cet élément a un parent avec l'ID body.