Explication détaillée des sélecteurs d'attributs CSS-tutoriel CSS-php.cn

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

小云云

Libérer： 2017-12-19 11:12:20

original

2113 Les gens l'ont consulté

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;
}

Copier après la connexion

Sélecteurs d'attributs et de valeurs

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

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

Copier après la connexion

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; }

Copier après la connexion

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; }

Copier après la connexion

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;
}

Copier après la connexion

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.