Explication détaillée des sélecteurs d'attributs CSS

Définissez les styles pour les éléments HTML avec les attributs spécifiés. Vous pouvez styliser les éléments HTML qui ont des attributs spécifiés, pas seulement les attributs class et id. Cet article vous présente principalement les connaissances pertinentes sur les sélecteurs d'attributs CSS. Les amis intéressés devraient y jeter un œil. J'espère que cela pourra vous aider.

Remarque : IE7 et IE8 prennent en charge les sélecteurs d'attributs uniquement lorsque !DOCTYPE est spécifié. Dans IE6 et versions antérieures, la sélection d'attributs n'est pas prise en charge.

Sélecteur d'attribut

L'exemple suivant stylise tous les éléments avec l'attribut title :

[title]
{
color:red;
}

Sélecteurs d'attributs et de valeurs

L'exemple suivant stylise tous les éléments avec title="W3School" :

[title=W3School]
{
border:5px solid blue;
}

Sélecteurs d'attributs et de valeurs - valeurs multiples

L'exemple suivant stylise tous les éléments qui contiennent un attribut de titre avec une valeur spécifiée. S'applique aux valeurs d'attribut séparées par des espaces :

[title~=hello] { color:red; }

L'exemple suivant stylise tous les éléments avec un attribut lang qui contient la valeur spécifiée. S'applique aux valeurs d'attribut séparées par des tirets :

[lang|=en] { color:red; }

Styliser le formulaire

Le sélecteur d'attribut n'est pas particulièrement utile lors du style de formulaires avec classe ou identifiant :

input[type="text"]
{
  width:150px;
  display:block;
  margin-bottom:10px;
  background-color:yellow;
  font-family: Verdana, Arial;
}
input[type="button"]
{
  width:120px;
  margin-left:35px;
  display:block;
  font-family: Verdana, Arial;
}

Manuel de référence du sélecteur CSS

Sélecteur	Description
[attribut]	est utilisé pour sélectionner des éléments avec des attributs spécifiés.
[attribute=value]	est utilisé pour sélection Un élément avec des attributs et des valeurs spécifiés.
[attribut~=valeur]	est utilisé Sélectionne les éléments dont les valeurs d'attribut contiennent le vocabulaire spécifié.
[attribut|=valeur]	est utilisé pour sélectionner avec une valeur spécifiée Élément qui commence par une valeur d'attribut, qui doit être un mot entier.
[attribute^=value]	Attribut de correspondance Chaque élément dont la valeur commence par la valeur spécifiée.
[attribute$=value]	Attributs de correspondance Chaque élément dont la valeur se termine par la valeur spécifiée.
[attribute*=value]	Attribut de correspondance Chaque élément de la valeur contient la valeur spécifiée.

Recommandations associées :

sélecteur d'attribut CSS - sélectionnez les éléments en fonction de la valeur de l'attribut de nom des éléments HTML

Lire et écrire les attributs CSS des éléments HTML

Exemple d'attribut CSS de définition de jQuery introduction_jquery

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!