Le sélecteur universel (*) affecte-t-il les pseudo-éléments comme :before et :after ?

Sélecteur universel (*) et pseudo-éléments (:before, :after)

Le sélecteur universel (*) étend-il son influence aux pseudo-éléments comme :before et :after? Par exemple, lors de l'utilisation de :

* { box-sizing: border-box; }

Est-ce que cela affectera automatiquement les pseudo-éléments ou est-il nécessaire de déclarer explicitement :

*, *:before, *:after { box-sizing: border-box; }

Contrairement à l'intuition, le sélecteur universel n'impacte pas directement pseudo-éléments (en dehors de l'héritage indirect). En effet, :before et :after sont des entités distinctes des éléments réels et sont représentés par des abstractions.

Les sélecteurs simples comme * ne peuvent cibler que les éléments réels, pas les pseudo-éléments. Pour styliser :before et :after, vous devez les inclure explicitement dans votre sélecteur.

La raison pour laquelle vous n'avez peut-être pas rencontré de problèmes malgré l'utilisation de * uniquement peut être due au fait que les pseudo-éléments sont affichés par défaut en ligne, ce qui n'est pas affecté. par dimensionnement de la boîte.

N'oubliez pas que lorsque vous utilisez plusieurs sélecteurs simples, l'inclusion de * est facultative pour plus de clarté. De plus, alors que la spécification actuelle des sélecteurs utilise des doubles-points pour désigner les pseudo-éléments, les anciens navigateurs prennent en charge la notation à deux points pour les réinitialisations de la taille des boîtes.

Bien que :before, :after applique des styles à pseudo-éléments de tous les éléments, ils ne seront pas générés tant que vous n'aurez pas déclaré la propriété content. Cela ne pose aucun problème de performances.

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!