CSS PropriétéSélecteurs

Les sélecteurs d'attributs CSS sont utilisés pour sélectionner des éléments HTML en fonction de leurs attributs ou de leurs valeurs d'attribut.

Les sélecteurs d'attributs peuvent vous aider à styliser des éléments sans avoir besoin de leur ajouter des classes ou des ID.

Remarque :IE7 et IE8 nécessitent une déclaration!DOCTYPELes sélecteurs d'attribut ne sont pris en charge qu'à partir d'IE7 ! IE6 et les versions inférieures ne prennent pas en charge les sélecteurs d'attribut.

Voici les sélecteurs d'attribut CSS courants :

1、[attribute]

Sélectionne tous les éléments avec un attribut spécifié (quelle que soit la valeur de l'attribut).

/* 选择所有具有 `type` 属性的元素 */
[type] {
  border: 1px solid red;
}

2、[attribute="value"]

Sélectionne les éléments dont l'attribut spécifié et la valeur correspondent exactement.

/* 选择所有 `type` 属性等于 `text` 的元素 */
[type="text"] {
  background-color: yellow;
}

3、[attribute~="value"]

Sélectionne les éléments dont la valeur d'attribut contient une valeur spécifiée (l'une d'un ensemble séparé par des espaces).

/* 选择属性值中包含 `button` 的元素 */
[class~="button"] {
  font-weight: bold;
}

4、[attribute|="value"]

Sélectionne les éléments avec un attribut spécifié ou une valeur d'attribut qui commence par la valeur spécifiée et est immédiatement suivie d'un trait d'union -, couramment utilisé pour les langues.

/* 选择所有 `lang` 属性是 `en` 或者以 `en-` 开头的元素 */
[lang|="en"] {
  color: green;
}

5、[attribute^="value"]

Sélectionne les éléments dont la valeur d'attribut commence par la valeur spécifiée.

/* 选择所有 `href` 属性以 `https` 开头的链接 */
[href^="https"] {
  text-decoration: none;
}

6. [attribute$="value"]

Sélectionne les éléments dont la valeur d'attribut se termine par la valeur spécifiée.

/* 选择所有 src 属性以 .jpg 结尾的图片 */
[src$=".jpg"] {
  border: 2px solid blue;
}

7. [attribute*="value"]

Sélectionne les éléments dont la valeur d'attribut contient la valeur spécifiée.

/* 选择所有 `title` 属性中包含 `tutorial` 的元素 */
[title*="tutorial"] {
  font-style: italic;
}

Avec les sélecteurs d'attributs, vous pouvez facilement sélectionner des éléments et appliquer des styles spécifiques en fonction de leurs attributs, ce qui augmente la flexibilité et la maintenabilité.

Sélecteur d'attribut

L'exemple suivant met en bleu tous les éléments contenant un attribut title :

Sélecteurs d'attributs et de valeurs

L'exemple suivant modifie le style de bordure de l'élément avec title='example' :

Sélecteurs d'attribut et de valeur - valeurs multiples

Voici un exemple de mise en forme d'éléments dont l'attribut title contient une valeur spécifiée, en utilisant (~) pour séparer l'attribut et la valeur :

Voici un exemple de mise en forme d'éléments dont l'attribut lang contient une valeur spécifiée, en utilisant (|) pour séparer l'attribut et la valeur :

Styles de formulaire

Les styles de sélecteur d'attribut n'ont pas besoin d'utiliser les formes class ou id :