Maison > interface Web > tutoriel CSS > Comment styliser les éléments CSS avec des deux-points dans leurs identifiants ?

Comment styliser les éléments CSS avec des deux-points dans leurs identifiants ?

DDD
Libérer: 2024-12-06 14:30:15
original
333 Les gens l'ont consulté

How to Style CSS Elements with Colons in Their IDs?

Sélecteurs CSS : surmonter les deux-points dans les ID d'élément

Lorsque vous travaillez avec CSS, vous pouvez rencontrer des situations dans lesquelles vous devez styliser un élément avec un ID contenant un caractère deux-points ( :). Cependant, comme les deux points sont utilisés comme délimiteur de pseudo-éléments en CSS, cela peut entraîner des conflits.

Dans votre cas, JSF a défini l'ID d'un champ de saisie sur "search_form:expression". Pour spécifier le style de cet élément, vous êtes confronté à un problème avec les deux-points entraînant une interprétation incorrecte du sélecteur.

Solution : utiliser l'échappement avec barre oblique inverse

Pour échapper au deux points et assurez-vous qu'il est traité comme faisant partie de l'ID de l'élément, vous pouvez utiliser une barre oblique inverse () devant lui. Par exemple :

input#search_form\:expression {
  ///...
}
Copier après la connexion

En ajoutant la barre oblique inverse, vous échappez efficacement aux deux points, l'empêchant d'être reconnu comme délimiteur de pseudo-éléments. Le navigateur l'interprétera ensuite correctement comme faisant partie de l'ID de l'élément.

Ressource supplémentaire :

  • [Utilisation d'espaces de noms avec CSS](https://msdn .microsoft.com/en-us/library/ms531194.aspx) (MSDN) fournit des informations supplémentaires à ce sujet sujet.

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!

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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal