: où () a également une astuce de spécificité cool.

:is() et :where() sont les pseudo-sélecteurs CSS offrant une fonctionnalité similaire mais diffèrent considérablement en spécificité. Récemment :is() a gagné en popularité en raison du support plus large du navigateur, simplifiant des sélecteurs complexes. Cependant, :where() fournit un avantage crucial dans le contrôle de la spécificité.

:is() hérite de la spécificité de son argument le plus spécifique. Cela peut être avantageux pour augmenter la spécificité sans ajouter de classes supplémentaires, comme démontré:

 : est (.button, # augmentation # spécificité) {
  / * La spécificité augmente * /
}

Inversement, :where() n'a toujours aucune spécificité, quels que soient ses arguments. Ceci est particulièrement utile pour abaisser la spécificité dans les situations où un sélecteur de spécificité supérieure pourrait involontairement remplacer un style plus général. Considérez cet exemple:

 .Card: est (.Title, p) {/ * Spécificité élevée en raison de .Title * /
  Couleur: rouge;
}

.Card p {/ * Spécificité inférieure * /
  Couleur: Jaune;
}

Ici, red gagne en raison de la spécificité héritée de :is() . Le passage à :where() modifie le résultat:

 .Card: où (.Title, p) {/ * zéro spécificité * /
  Couleur: rouge;
}

.Card p {/ * Spécificité inférieure, mais gagne toujours * /
  Couleur: Jaune;
}

Maintenant, yellow prévaut parce que :where() est plus faible.

Choisir entre :is() et :where() dépend de vos besoins spécifiques. Généralement, en commençant par :is() est recommandé pour sa simplicité. Cependant, si vous rencontrez des conflits de spécificité, :where() offre un outil puissant pour gérer et réduire la spécificité, empêchant les remplacements de style involontaire. Bien que la faible spécificité soit généralement préférée pour la maintenabilité, la spécificité zéro extrême de :where() pourrait introduire ses propres complexités. Par conséquent, une approche équilibrée est la clé - utilisation :is() sauf si vous avez besoin du contrôle précis de spécificité offert par :where() .

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!