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, [e8aa4f7ce323535a9b01247c46fe6139]

Cibler tous Un élément contenant l'attribut e8aa4f7ce323535a9b01247c46fe6139, 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 e8aa4f7ce323535a9b01247c46fe6139 est 8487820b627113dd990f63dd2ef215f3.

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

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

3. [e8aa4f7ce323535a9b01247c46fe6139~=8487820b627113dd990f63dd2ef215f3]

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

8487820b627113dd990f63dd2ef215f3 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. [e8aa4f7ce323535a9b01247c46fe6139|=8487820b627113dd990f63dd2ef215f3]

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

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. [e8aa4f7ce323535a9b01247c46fe6139^=8487820b627113dd990f63dd2ef215f3]

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

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

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

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

6. [e8aa4f7ce323535a9b01247c46fe6139$=8487820b627113dd990f63dd2ef215f3]

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

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

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

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

7. [e8aa4f7ce323535a9b01247c46fe6139*=8487820b627113dd990f63dd2ef215f3]

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

Remarque : 8487820b627113dd990f63dd2ef215f3 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!