Quels sont les sélecteurs d'attributs des sélecteurs CSS ?

Les sélecteurs d'attributs des sélecteurs CSS incluent le sélecteur égal, le sélecteur contient, le sélecteur de début, le sélecteur de fin, le sélecteur de sous-chaîne, le sélecteur à valeurs multiples et le sélecteur négatif, etc. Introduction détaillée : 1. Le sélecteur égal, utilisant des crochets et des signes égal, signifie sélectionner des éléments avec des valeurs d'attribut spécifiées ; 2. Le sélecteur contenant, utilisant des crochets et des astérisques, signifie sélectionner des éléments contenant la valeur d'attribut de la chaîne spécifiée ; Pour démarrer le sélecteur, utilisez des crochets et des astérisques pour sélectionner les éléments avec des valeurs d'attribut commençant par la chaîne spécifiée 4. Pour terminer le sélecteur, utilisez des crochets et des signes dollar, etc.

Le système d'exploitation de ce tutoriel : système Windows 10, ordinateur DELL G3.

Les sélecteurs CSS fournissent une variété de sélecteurs d'attributs pour sélectionner des éléments en fonction de leurs valeurs d'attribut. Ces sélecteurs d'attributs peuvent sélectionner en fonction de l'égalité, de l'inclusion, du début, de la fin, etc. des valeurs d'attribut. Les éléments suivants sont des sélecteurs d'attributs courants en CSS :

1. Sélecteur égal : utilisez des crochets ([]) et des signes égal (=) pour sélectionner des éléments avec des valeurs d'attribut spécifiées. Par exemple, `[class="red"]` signifie sélectionner tous les éléments dont la valeur de l'attribut de classe est "red".

2. Contient le sélecteur : utilisez des crochets ([]) et des astérisques (*) pour sélectionner les éléments qui contiennent la valeur d'attribut de la chaîne spécifiée. Par exemple, `[href*="example"]` signifie sélectionner tous les éléments dont la valeur de l'attribut href contient "example".

3. Commence par le sélecteur : utilisez des crochets ([]) et des signes pointus (^) pour sélectionner des éléments avec des valeurs d'attribut commençant par la chaîne spécifiée. Par exemple, `[class^="red"]` signifie sélectionner tous les éléments dont la valeur d'attribut de classe commence par "red".

4. Se termine par un sélecteur : utilisez des crochets ([]) et le signe dollar ($) pour sélectionner des éléments dont les valeurs d'attribut se terminent par la chaîne spécifiée. Par exemple, `[class$="red"]` signifie sélectionner tous les éléments dont la valeur d'attribut de classe se termine par "red".

5. Sélecteur de sous-chaîne : utilisez des crochets ([]) et des symboles de barre verticale (|) pour sélectionner des éléments avec des valeurs d'attribut spécifiées, ou la valeur d'attribut commence par la chaîne spécifiée et est suivie d'un trait d'union. Par exemple, `[lang|="en"]` signifie sélectionner tous les éléments dont la valeur d'attribut de langue est "en", ou les éléments dont la valeur d'attribut commence par "en-".

6. Sélecteur de valeurs multiples : utilisez des crochets ([]) et le signe égal (=) pour spécifier plusieurs valeurs d'attribut en même temps, ce qui signifie sélectionner des éléments avec l'une des valeurs d'attribut spécifiées. Séparez plusieurs valeurs d'attribut par des espaces. Par exemple, `[class="red blue"]` signifie sélectionner tous les éléments dont la valeur d'attribut de classe est "red" ou "blue".

7. Sélecteur de négation : utilisez des crochets ([]) et deux points (:not()) pour sélectionner les éléments qui n'ont pas la valeur d'attribut spécifiée. Par exemple, `[class]:not([class="red"])` signifie sélectionner tous les éléments qui ont un attribut de classe mais qui ne sont pas « rouges ».

Les sélecteurs d'attributs ci-dessus sont courants en CSS. En utilisant ces sélecteurs, nous pouvons sélectionner et styliser des éléments dans des pages Web en fonction de leurs valeurs d'attribut pour obtenir des effets riches et diversifiés. Dans le même temps, les sélecteurs d'attributs peuvent également être utilisés en combinaison avec d'autres sélecteurs et sélecteurs de pseudo-classe pour élargir davantage la portée et les conditions de sélection.

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!