Comment utiliser efficacement les sélecteurs CSS

Cette fois, je vais vous montrer comment utiliser efficacement les sélecteurs CSS, et quelles sont les précautions pour utiliser efficacement les sélecteurs CSS. Voici des cas pratiques, jetons un oeil.

Quand j'ai écrit CSS pour la première fois, je pensais que c'était très simple et que je pouvais l'écrire de manière aussi sauvage que possible. Plus tard, j'ai progressivement découvert que même si l'écriture sans règles pouvait donner des résultats, dans le développement réel, cela pouvait entraîner davantage de travail inutile ou répété, et CSS n'était pas efficace. Par conséquent, lors du développement ultérieur, nous avons délibérément suivi certaines règles pour écrire du CSS efficace et réutilisable autant que possible. Pour résumer, les principaux aspects sont les suivants.

Premier coup d'œil à un court morceau de code CSS :

#menus > li { font-size: 14px; }

Peut-être que tout le monde devinera que le navigateur respectera les règles ci-dessus de gauche à droite , nous allons imaginer que le navigateur trouve d'abord l'élément unique avec un identifiant de menus, puis applique le style à son élément enfant direct, l'élément li. Cela semble être assez efficace.

Cependant, les sélecteurs CSS correspondent en réalité de droite à gauche. Par conséquent, la règle ci-dessus n'est pas efficace. Le navigateur doit parcourir chaque élément li de la page et déterminer si l'identifiant de son élément parent est un menu.

Le système de style commence à faire correspondre les règles du sélecteur le plus à droite vers la gauche. Tant qu'il y a d'autres sélecteurs à gauche du sélecteur actuel, le système de style continuera à se déplacer vers la gauche jusqu'à ce qu'il trouve un élément qui correspond à la règle, ou qu'il se ferme en raison d'une incompatibilité.

Les règles courantes suivantes pour écrire des sélecteurs CSS efficaces sont :

1. Évitez d'utiliser des règles génériques

. En plus des sélecteurs génériques au sens traditionnel, nous avons classé les sélecteurs frères adjacents, les sous-sélecteurs et les sélecteurs descendants qui correspondent aux sélecteurs d'attributs dans la catégorie des règles génériques. Il est recommandé d'utiliser uniquement les sélecteurs d'ID, de classe et de balise.

2. Ne limitez pas le sélecteur d'ID

Un ID spécifié ne peut correspondre qu'à un seul élément de la page, il n'est donc pas nécessaire d'ajouter des supplémentaires. qualificatif. Par exemple, p#header n'est pas nécessaire et doit être simplifié en #header.

3. Ne limitez pas le sélecteur de classe

Ne limitez pas le sélecteur de classe avec des étiquettes spécifiques, mais développez le nom de la classe en fonction de la situation réelle. Par exemple, remplacez li.chapter par .li-chapter, ou encore mieux, .list-chapter.

4. Rendez les règles aussi précises que possible

N'essayez pas d'écrire de longs sélecteurs comme ol li a, il vaut mieux en créer un comme .list-anchor class et ajoutez-le à l’élément approprié.

5. Évitez d'utiliser des sélecteurs descendants

Habituellement, le coût de traitement des sélecteurs descendants est le plus élevé, mais vous pouvez également obtenir les résultats souhaités en utilisant des sous-sélecteurs, et Plus efficace.

6. Évitez d'utiliser des sous-sélecteurs de balises

S'il existe des sous-sélecteurs basés sur des balises comme #menus > a, alors ils devraient l'être. used Une classe à associer à chaque élément d'étiquette, telle que .menus-item.

7. Remettez en question toutes les utilisations des sous-sélecteurs

Examinez toutes les utilisations des sous-sélecteurs et remplacez-les par des classes concrètes chaque fois que possible.

8. S'appuyer sur l'héritage

Comprenez quels attributs peuvent être hérités, puis évitez de spécifier à plusieurs reprises des règles pour ces attributs. Par exemple, spécifiez list-style-image sur un élément de liste plutôt que sur chaque élément de liste. Veuillez vous référer à la liste des propriétés héritées pour en savoir plus sur les propriétés héritées de chaque élément.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

CSS3 pour créer un fond rayé

CSS3 pour créer un arc semi-circulaire

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!