[CSS/DIV] Analysez l’utilisation des quatre principaux sélecteurs de valeur d’attributs CSS

Cet article va vous le décrireSélecteur de valeur de propriété CSSLe format du sélecteur d’attributs est un élément suivi de parenthèses, avec des attributs entre parenthèses, ou des expressions d’attributs (je ne sais pas si la description est correcte, mots que j’ai moi-même créés), comme h1[title], h1[title="logo"], etc., je pense que vous apprendrez beaucoup dans cet article.

Tutoriel CSS : Sélecteur de valeur d’attribut CSS

CSS AttributeSelectors, peut-être ne devrais-tu pas être étranger aux sélecteurs d’attributs, en essence, les selecteurs id et de classe sont en fait des sélecteurs de valeur d’attribut, il suffit de sélectionner la valeur id ou de classe.

Le format du sélecteur d’attributs est un élément suivi de parenthèses, avec des attributs entre parenthèses, ou des expressions d’attributs (je ne sais pas si la description est correcte, mots que j’ai auto-créés), comme h1[title], h1[title="Logo"], etc., vous pouvez voir 4 formes spécifiques issues de ma discussion ci-dessous.

1. Sélecteur simple de valeur d’attribut CSS

Quel que soit le nom, c’est la caractéristique du sélecteur d’attributs simple.

h1[classe]{color :argent ; agira sur tout élément H1 avec classe, quelle que soit la valeur de la classe. Par conséquent<h1class="hoopla">Bonjour</h1>, <h1class="sévère">Sérénité</h1>, <h1class="fancy"> h1 de Fooling</h1> sera affecté par cette règle.

Bien sûr, cette « propriété » n’est pas seulement une classe ou un id, mais peut être toutes les propriétés légitimes de l’élément, comme l’alt d’img, comme img[alt]{cssdeclarationshere ; S’appliquera à tout élément IMG avec l’attribut Alt. Puis a[href][titre]{font-weight :gras ; Et } ? Comme vous le savez, cela fonctionne sur des éléments ayant à la fois des attributs href et title, tels que <atitle="W3CHome">W3C</a>.

2. Sélecteur précis de valeur d’attributs CSS

id et class sont essentiellement des sélecteurs exacts de valeurs d’attribut, oui, h1#logo est égal à h1[id="logo"]. Comme mentionné plus tôt, nous ne nous limitons pas à l’identifiant ou à la classe, nous pouvons utiliser n’importe quelle propriété ! Par exemple, a[][title="W3CHome"]{font-size :200 %; } s’appliquera à <atitle="W3CHome">W3C</a>.

3. Certains sélecteurs de valeur d’attributs CSS

Comme son nom l’indique, tant que la valeur de l’attribut correspond partiellement (dans ce cas, la partie qui correspond réellement au mot entier), elle agira sur l’élément. Prenons un exemple :

N’importe laquelle de ces sources peut rendre la police du p en gras.

Ce sélecteur est très utile, par exemple, si vous souhaitez styliser une illustration avec la chaîne « Figure » dans son titre, par exemple title="Figure5 :xxx description », vous pouvez utiliser img[title~="Figure"].

Il convient de noter que, comme je l’ai souligné dans la première phrase, il faut correspondre au mot entier, et img[title~="Figure"] ne correspondra pas à la description title="Figure5 :xxx ».

J’ai aussi fait un petit test, on change « Figure » en « Illustration » dans l’exemple, puis on change img[title~="Figure"] en img[title~="Illustration"], et ça correspond toujours dans Firefox, que le codage soit GB2312 ou UTF-8. Il semble que le support CSS pour le chinois ne soit pas mauvais.

4. Sélecteur de valeur d’attribut CSS spécial

C’est un peu bizarre, ce sélecteur. Cela fonctionne comme ça, eh bien, il est plus facile de donner un exemple que de le décrire.

*[lang|="en"]{color :white ; Cette règle sélectionnera la valeur de l’attribut lang ou de l’élément commençant par en-. C’est-à-dire qu’il peut correspondre à <h1lang="en">Bonjour !</h1>, <plang="en-us">Salutations !</p>et <divlang="en-au">Bonjour !</div>et ne correspond pas à <plang="fr">Bonjour !</p>et <h3lang="cy-en">Jrooana !</h3>.