Maison > interface Web > tutoriel CSS > le corps du texte

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

Barbara Streisand
Libérer: 2024-11-07 02:05:03
original
726 Les gens l'ont consulté

Does the Universal Selector (*) Affect Pseudo-Elements Like :before and :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; }
Copier après la connexion

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; }
Copier après la connexion

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!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!