Maison > interface Web > tutoriel CSS > Pouvez-vous utiliser des valeurs d'attribut comme sélecteurs CSS ?

Pouvez-vous utiliser des valeurs d'attribut comme sélecteurs CSS ?

Linda Hamilton
Libérer: 2024-11-03 20:06:03
original
771 Les gens l'ont consulté

Can You Use Attribute Values as CSS Selectors?

Les valeurs d'attribut peuvent-elles être utilisées comme sélecteurs CSS ?

La mise à jour dynamique du CSS en fonction des valeurs d'entrée est une exigence courante dans le développement Web. Les navigateurs ne prennent pas automatiquement en charge cette fonctionnalité, car les sélecteurs CSS ciblent généralement les attributs statiques.

Valeurs dynamiques

Comme expliqué, les règles CSS simples ciblent les valeurs d'attribut, et non les valeurs réelles. Pour les mises à jour dynamiques, JavaScript peut être utilisé pour manipuler le CSS en fonction des valeurs d'entrée.

Réponse originale

Cependant, le ciblage de valeurs statiques est toujours possible à l'aide des sélecteurs d'attributs CSS :

<code class="css">input[value="United States"] { color: #F90; }</code>
Copier après la connexion

Ce sélecteur cible les entrées avec un attribut de valeur « États-Unis » et définit la couleur du texte sur rouge.

Sélecteurs d'attributs CSS

Les sélecteurs d'attributs CSS font référence aux attributs d'entrée des manières suivantes :

  • [attr] - Fait correspondre les éléments avec un attribut "attr" défini, quelle que soit la valeur.
  • [attr=val] - Fait correspondre les éléments avec une valeur d'attribut "attr" égale à " val".
  • [attr~=val] - Correspond aux éléments avec une valeur d'attribut "attr" contenant "val".
  • [attr|=val] - Correspond aux éléments avec un "attr" valeur d'attribut égale à "val" ou commençant par "val-".

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