Maison >interface Web >tutoriel CSS >Comment puis-je styliser les étiquettes en fonction de leur attribut « for » en CSS ?

Comment puis-je styliser les étiquettes en fonction de leur attribut « for » en CSS ?

Mary-Kate Olsen
Mary-Kate Olsenoriginal
2024-11-29 08:14:10617parcourir

How can I style labels based on their

Style des étiquettes basé sur l'attribut 'for' en CSS

Dans certains scénarios, vous souhaiterez peut-être appliquer des styles spécifiques aux étiquettes en fonction de leur attribut « pour » associé. Pour y parvenir, vous pouvez utiliser des sélecteurs CSS.

Sélecteur CSS pour les étiquettes avec des attributs « pour » spécifiques :

La syntaxe de sélection des étiquettes en fonction du « pour » l'attribut est :

label[for=value]

où « valeur » représente la valeur de l'attribut souhaité. Par exemple, pour cibler l'étiquette associée à un élément avec>

label[for=email]
{
  /* Styles for the label */
}

Sélecteurs JavaScript et jQuery :

Vous pouvez également sélectionner des étiquettes à l'aide du DOM en JavaScript ou jQuery :

// JavaScript
var element = document.querySelector("label[for=email]");

// jQuery
var element = $("label[for=email]");

Gestion des caractères spéciaux dans les attributs Valeurs :

Si la valeur de l'attribut contient des caractères spéciaux, tels que des espaces ou des crochets, placez-la entre guillemets :

label[for="field[]"]
{
  /* Styles for the label */
}

Les guillemets peuvent être simples ou doubles.

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:
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