Comment utiliser correctement les caractères génériques du sélecteur CSS

Comment éviter d'abuser des caractères génériques du sélecteur CSS

CSS (Cascading Style Sheets) est un langage utilisé pour la conception et le style de sites Web. Un caractère générique de sélecteur CSS est un sélecteur spécial qui correspond à tous les attributs d'un élément spécifié et de ses éléments enfants. Lors de l'utilisation de sélecteurs CSS, une mauvaise utilisation des caractères génériques peut conduire à des sélecteurs trop larges, à de mauvaises performances et à un code moins maintenable. Cet article explique comment éviter d'abuser des caractères génériques du sélecteur CSS et fournit des exemples de code spécifiques.

1. Utilisez des sélecteurs plus spécifiques
   Le sélecteur générique (*) peut correspondre à n'importe quel élément de la page, mais un tel sélecteur est très large et sélectionnera chaque élément de la page. Pour éviter les sélections inutiles, vous devriez essayer d'utiliser des sélecteurs plus spécifiques. Par exemple, si vous souhaitez uniquement sélectionner un élément spécifique avec le nom de classe « exemple » sur la page, vous pouvez utiliser le sélecteur [class="exemple"].

[class="example"] {
  /* 样式设置 */
}

2. Évitez l'utilisation excessive de caractères génériques dans les sélecteurs multi-niveaux
   Lorsque vous utilisez des sélecteurs multi-niveaux, vous devez essayer d'éviter d'utiliser des caractères génériques dans chaque niveau du sélecteur. Cela augmente la complexité du sélecteur et peut sélectionner des éléments indésirables. Dans les sélecteurs multi-niveaux, les caractères génériques doivent être limités au dernier niveau pour éviter de sélectionner des éléments inutiles.

.parent .child * {
  /* 样式设置 */
}

Dans le code ci-dessus, nous limitons le caractère générique au dernier sélecteur pour éviter d'utiliser des caractères génériques à chaque niveau.

3. Utilisez des sélecteurs de nom de classe ou d'ID
   Les sélecteurs de nom de classe et d'ID sont les sélecteurs les plus couramment utilisés en CSS, ils sont plus spécifiques et peuvent sélectionner les éléments requis avec plus de précision. Par rapport aux sélecteurs génériques, l'utilisation de sélecteurs de nom de classe ou d'ID peut réduire la complexité du sélecteur et améliorer la lisibilité du code.

.exampleClass {
  /* 样式设置 */
}

#exampleId {
  /* 样式设置 */
}

4. Utiliser des sélecteurs enfants ou adjacents
   Le sélecteur enfant (>) et le sélecteur adjacent (+) peuvent limiter la portée du sélecteur pour sélectionner uniquement des éléments enfants ou adjacents spécifiques. Cela évite une utilisation abusive des sélecteurs génériques et améliore également les performances des sélecteurs.

.parent > .child 
/* 只选择直接子元素 */

.element + .sibling
/* 只选择相邻元素 */

5. Styles de chargement paresseux ou utilisation du cache du navigateur
   Parfois, pour obtenir certains effets, vous devrez peut-être utiliser des sélecteurs plus complexes. Pour éviter un chargement lent des pages, vous pouvez charger ces styles paresseusement ou utiliser la mise en cache du navigateur pour charger les styles uniquement en cas de besoin.

<script>
  // 等页面加载完成后再加载样式
  window.onload = function() {
    var styleTag = document.createElement('style');
    styleTag.innerHTML = `
      .complicated-selector {
        /* 样式设置 */
      }
    `;
    document.head.appendChild(styleTag);
  };
</script>

Dans l'exemple ci-dessus, le style sera ajouté dynamiquement à la page après le chargement de la page, évitant ainsi l'influence du style pendant le processus de chargement de la page.

Résumé :
L'abus des caractères génériques du sélecteur CSS peut entraîner des sélecteurs trop larges, une dégradation des performances et une maintenabilité réduite du code. Pour éviter d'abuser des caractères génériques, nous pouvons utiliser des sélecteurs plus spécifiques, éviter l'utilisation excessive de caractères génériques dans les sélecteurs multi-niveaux, utiliser des sélecteurs de nom de classe ou d'ID, utiliser des sous-sélecteurs ou des sélecteurs adjacents, charger des styles paresseusement ou profiter de la mise en cache du navigateur pour améliorer le style. chargement et performances des pages.

Grâce à une utilisation raisonnable des sélecteurs, nous pouvons mieux contrôler le champ d'application des styles et améliorer la lisibilité et la maintenabilité du code. Dans le même temps, il peut également assurer l’optimisation de la vitesse et des performances de chargement des pages.

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!