Qu'est-ce que le sélecteur d'attributs CSS ? Utilisation des sélecteurs d'attributs

Qu'est-ce que le sélecteur d'attributs CSS ? Cet article vous parlera du sélecteur d'attribut CSS, afin que vous puissiez comprendre ce que fait le sélecteur d'attribut et comment l'utiliser. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.

Qu'est-ce que le sélecteur d'attributs CSS ? A quoi ça sert ?

Les éléments en HTML peuvent avoir des attributs, qui sont des valeurs supplémentaires qui affichent ou modifient leur comportement. HTML contient de nombreux attributs, mais tous les attributs ne sont pas applicables à tous les éléments HTML. Les propriétés sans rapport avec l'élément n'ont aucun effet sur celui-ci.

Que la propriété soit appliquée correctement ou non, vous pouvez toujours la sélectionner via CSS. Cependant, utiliser des attributs HTML invalides n’importe où sur votre site Web est une très mauvaise pratique car différents navigateurs interprètent différemment le HTML invalide. Vous ne pouvez pas reprocher au navigateur de rendre votre site bizarre, il essaie simplement d'expliquer votre code d'erreur en comblant les lacunes.

Cependant, le sélecteur d'attribut CSS nous permet de sélectionner des éléments avec des attributs spécifiques ou des attributs avec des valeurs spécifiques, c'est-à-dire que nous pouvons trouver la balise correspondante en fonction du nom d'attribut spécifié, puis définir l'attribut. [Tutoriels vidéo associés recommandés : Tutoriel CSS3]

Utilisation du sélecteur d'attribut CSS

Valeurs d'attribut en HTML Doit être un identifiant ou une chaîne. La spécification est plutôt vague, car elle indique que la sensibilité à la casse des noms de propriétés et des valeurs dans les sélecteurs dépend de la langue du document. Étant donné que les navigateurs se comportent de manière incohérente, la chose la plus sûre à faire est de s'assurer que les casses que vous utilisez sont cohérentes entre CSS et HTML.

Les sélecteurs d'attributs peuvent être mis en correspondance de 7 manières (à partir de la spécification CSS3) :

1, []

Cibler tous Un élément contenant l'attribut , quelle que soit sa valeur.

Exemple :

<div data-colour="green"></div>
<div data-colour="blue"></div>
<div data-colour="yellow"></div>

Sélection du code CSS :

[data-colour] { 
   /* 一些性质，例：color..... */ 
}

2. 🎜>

Localise tous les éléments dont la valeur de l'attribut est .

<div data-colour="green"></div>

[data-colour="green"] { 
    /* 一些性质 */ 
}

3. [~=]

Utilisez l'attribut sa valeur est Une liste de mots séparés par des espaces, dont l'un doit être .

elle-même ne peut pas contenir d'espaces ni être une chaîne vide.

<div data-colour="green yellow blue"></div>

[data-colour~="green"] { 
    /* 一些性质 */ 
}

4. [|=]

Utilisez l'attribut et sa valeur est exactement ou commence par

Remarque : principalement utilisé pour la correspondance des sous-codes de langue, tels que "en", "en-US" et "en-UK".

<div data-colour="green-table"></div>
<div data-colour="green-chair"></div>
<div data-colour="green-bottle"></div>

[data-colour|="green"] { 
    /* 一些性质 */ 
}

5. [^=]

Sélecteur de correspondance de sous-chaîne. Utilisez l'attribut pour localiser les éléments dont les valeurs commencent par .

Remarque : ne peut pas être une chaîne vide.

<div data-colour="greenish-yellow"></div>
<div data-colour="greengoblin"></div>

[data-colour^="green"] { 
    /* 一些性质 */ 
}

6. [$=]

Sélecteur de correspondance de sous-chaîne. Utilisez l'attribut pour localiser les éléments dont les valeurs se terminent par .

Remarque : ne peut pas être une chaîne vide.

<div data-colour="yellowish-green"></div>
<div data-colour="seagreen"></div>

[data-colour$="green"] { 
    /* 一些性质 */ 
}

7. [*=]

Sélecteur de correspondance de sous-chaîne. Utilisez l'attribut pour localiser un élément dont la valeur contient une instance de .

Remarque : ne peut pas être une chaîne vide.

<div data-colour="goblingreenish"></div>

[data-colour*="green"]{ 
    /* 一些性质 */ 
}

Sélecteurs d'attributs combinés

Les sélecteurs d'attributs ont le même niveau de spécificité que les classes et pseudo-classes que vous pouvez ; Combinez les sélecteurs d'attributs avec d'autres sélecteurs tels que l'élément, la classe ou l'ID. Exemple :

div[data-colour="green"] {
  /* 特异性为11 */
}
.swatch[data-colour="green"] {
  /* 特异性为20 */
}
#tile25[data-colour="green"] {
  /*特异性为110 */
}

Vous pouvez également combiner plusieurs sélecteurs d'attributs pour faire correspondre des modèles spécifiques. Par exemple, si vous souhaitez uniquement cibler des images 2x avec un texte alternatif contenant le mot « vert », votre sélecteur ressemblera à ceci :

img[srcset~="2x"][alt*="green"] { 
    /* 一些性质 */ 
}

De plus, puisque la valeur de l'attribut est lue comme une chaîne, donc vous n'avez pas à vous soucier d'échapper aux caractères spéciaux pour les faire correspondre, contrairement aux classes ou aux identifiants. Cela signifie que nous sommes libres d'avoir les éléments suivants :

[data-emotion="

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!