Comment styliser des étiquettes avec des valeurs d'attribut « pour » spécifiques en CSS ?

Style des étiquettes avec un attribut 'for' spécifique en CSS

Problème :

Considérez le code HTML suivant :

<label for="email">Email:</label>

Comment pouvons-nous sélectionner cette étiquette en CSS en fonction de sa valeur d'attribut 'for', qui est "email" ?

Solution :

Pour cibler l'étiquette en fonction de la valeur de l'attribut 'for', utilisez le sélecteur CSS suivant :

label[for="XYZ"]

Remplacer "XYZ" avec la valeur d'attribut souhaitée, dans ce cas "email":

label[for="email"]

A l'aide de ce sélecteur, vous pouvez appliquer des styles spécifiques au label :

label[for="email"] {
  /* ... Style definitions here ... */
}

Techniques supplémentaires :

JavaScript :

Pour sélectionner l'étiquette à l'aide du DOM en JavaScript, utilisez :

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

jQuery :

Avec jQuery, le le sélecteur devient :

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

Remarque de compatibilité :

Les sélecteurs d'attributs sont pris en charge par la plupart des navigateurs modernes. Toutefois, si vous devez prendre en charge les navigateurs existants (par exemple, IE6, IE7), envisagez plutôt d'utiliser une classe ou une autre approche structurelle.

Gestion des caractères spéciaux :

Si la valeur de l'attribut « for » contient des caractères spéciaux (par exemple, des espaces, des crochets), placez la valeur entre guillemets simples ou doubles :

label[for="field[]"]
{
    /* ...definitions here... */
}

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!