Introduction détaillée aux nouvelles fonctionnalités des sélecteurs d'attributs en CSS3

Zéro, Présentation

Le sélecteur d'attribut pris en charge par CSS2 utilise une expression [{attribute|attribut{= |= ~=} valeur}]
1.[class="a"] ne peut faire correspondre que les éléments avec class="a"
2.[class~="a"] peut faire correspondre les éléments avec class="a" et class="a b"
3.[lang|=en] peut correspondre aux éléments de lang="en" et lang="en-us".

CSS3 ajoute trois nouvelles méthodes de correspondance de *=, ^= et $= [{attribute | attribut {*= ^= $=} valeur}] :
1.*= représente la correspondance floue , [href="163"] peut correspondre à href="163.com", href="mail.163.com" et à d'autres éléments
2.^= signifie commencer par le caractère spécifié, [href^=" /" ] correspond aux éléments avec href="/a/a.htm" et href="/b"
3.$= signifie se terminer par le caractère spécifié, [scr$=".png"] correspond à toutes les images png , Par exemple, src="logo.png"

Les sélecteurs d'attribut CSS3 incluent principalement les types suivants :
1.E[attr] : utilise uniquement le nom de l'attribut, mais ne détermine aucune valeur d'attribut ;
2.E[attr="value"] : Spécifiez le nom de l'attribut et spécifiez la valeur de l'attribut
3.E[attr~="value"] : Spécifiez le nom de l'attribut et ayez la valeur de l'attribut. Cet attribut La valeur est une liste de mots séparés par des espaces. La liste de mots contient un mot de valeur, et le "?" devant le signe égal doit être écrit
4.E[attr^=" ; value"] : Spécifiez Le nom de l'attribut est spécifié, et il y a une valeur d'attribut, et la valeur de l'attribut commence par value ;
5.E[attr$="value"] : Le nom de l'attribut est spécifié, et il y a une valeur d'attribut, et la valeur d'attribut se termine par value. ;
6.E[attr*="value"] : Le nom de l'attribut est spécifié, et il y a une valeur d'attribut, et la valeur d'attribut contient value;
7.E[attr|="value"] : Spécifié Le nom de l'attribut est spécifié et la valeur de l'attribut est une valeur ou une valeur commençant par "value-" (par exemple, zh-cn

) ; 1. E[attr] : Le sélecteur d'attribut est CSS3. Le type de sélecteur d'attribut le plus simple. Si vous souhaitez sélectionner des éléments avec un certain attribut, quelle que soit la valeur de l'attribut, vous pouvez utiliser ce sélecteur d'attribut :

.demo a[id] {background: blue; color:yellow;font-weight:bold;}

Vous pouvez également utiliser plusieurs attributs pour sélectionner des éléments. , tel que E[attr1][attr2], afin que tout élément possédant les deux attributs soit sélectionné :

.demo a[href][title] {background: yellow; color:green;}

Remarque : IE6 ne prend pas en charge ce sélecteur.

2. E[attr="value"] : Spécifie la valeur de l'attribut "value"

.demo a[id="first"] {background: blue; color:yellow;font-weight:bold;}

Remarque : Attributs et attributs Les valeurs doivent correspondre exactement, surtout lorsque la valeur de l'attribut est sous la forme d'une liste de mots, comme :
test

.demo a[class="links"]{color:red};   
.demo a[class="links item"]{color:red};

IE6 ne prend pas en charge ce sélecteur .

3. E[attr~="value"] : Si vous souhaitez sélectionner des éléments en fonction d'un mot dans la liste de mots dans la valeur de l'attribut, vous devez utiliser cet attribut. Sélecteur de sélection : E[attr~="value"], ce type de sélecteur d'attribut est que la valeur de l'attribut est une liste d'un ou plusieurs mots. S'il s'agit d'une liste, ils doivent être séparés par des espaces, à condition qu'ils soient séparés par un. des valeurs d'attribut correspondent. L'élément peut être sélectionné. Le E[attr="value"] mentionné précédemment signifie que la valeur d'attribut doit correspondre complètement avant de pouvoir être sélectionnée. La différence entre eux est que l'on a un ". ? » et l'autre n'a pas de signe « ? ».

.demo a[title~="website"]{background:orange;color:green;}

Remarque : lorsqu'il y a une vague (?) dans le sélecteur d'attribut, la valeur de l'attribut sera mise en correspondance. Lorsqu'il n'y a pas de vague (?), la valeur de l'attribut doit être mise en correspondance. être complètement en valeur. IE6 ne prend pas en charge le sélecteur d'attribut E[attr~="value"].

4. E[attr^="value"] : Sélectionnez tous les éléments dont la valeur d'attribut attr commence par "value". En d'autres termes, l'attribut sélectionné a la valeur d'attribut correspondante. Cela commence par « valeur ».

.demo a[href^="http://"]{background:orange;color:green;}

Remarque : IE6 ne prend pas en charge le sélecteur E[attr^="value"].

5. E[attr$="value"] : Le sélecteur d'attribut E[attr$="value"] est juste l'opposé du sélecteur E[attr^="value"] , E[attr$="value"] signifie sélectionner tous les éléments dont la valeur d'attribut attr se termine par "value". En d'autres termes, il sélectionne l'attribut attr de l'élément et sa valeur d'attribut se termine par value. pour Il est très pratique pour vous d'ajouter des images d'arrière-plan à certains liens spéciaux. Par exemple, pour ajouter différentes icônes à différents fichiers tels que pdf, png, doc, etc., nous pouvons utiliser cet attribut pour y parvenir

.demo a[href$="png"]{background:orange;color:green;}

6. E[attr*="value"] : Sélectionnez tous les éléments dont la valeur de l'attribut attr contient la sous-chaîne "value". En d’autres termes, tant que l’attribut que vous sélectionnez a cette valeur « valeur » dans sa valeur d’attribut, il sera sélectionné.

.demo a[title*="site"]{background:black;color:white;}

7. E[attr|="value"] : est appelé un sélecteur d'attribut spécifique. Ce sélecteur sélectionnera tous les éléments dont la valeur de l'attribut attr est égale à value ou commence par value-.

.demo a[lang|="zh"]{background:gray;color:yellow;}

Remarques :
1. À l'exception d'IE6, qui ne prend pas en charge le sélecteur d'attribut, d'autres navigateurs peuvent le prendre en charge.
2.E[attr="value"] et E[attr*="value"] sont les plus pratiques, parmi lesquels E[attr="value"] peut nous aider à localiser différents types d'éléments, notamment les formulaires. Les opérations sur les éléments, telles que input[type="text"], input[type="checkbox"], etc., et E[attr*="value"] peuvent nous aider à faire correspondre différents types de fichiers sur le site Web, tels que vos liens vers différents types de fichiers sur votre site Web doivent utiliser différentes icônes pour aider votre site Web à améliorer l'expérience utilisateur. Tout comme dans l'exemple précédent, vous pouvez utiliser cet attribut pour ".doc", ".pdf", ".png" ", ".ppt" configure différentes icônes.

Pour une introduction plus détaillée aux fonctionnalités nouvellement ajoutées des sélecteurs d'attributs dans CSS3 et des articles connexes, veuillez prêter attention au site Web PHP chinois !