Comment puis-je cibler des éléments CSS avec des attributs de n'importe quelle valeur ?

Ciblage d'éléments avec des attributs de n'importe quelle valeur en CSS

En CSS, il est souvent nécessaire de cibler des éléments en fonction de leurs attributs. Bien qu'il soit simple de sélectionner des éléments avec des valeurs d'attribut spécifiques, cibler des éléments avec des valeurs d'attribut arbitraires peut s'avérer plus difficile.

Question : Sélection d'éléments avec des attributs arbitraires

Comment pouvons-nous cibler les éléments qui ont un attribut de n'importe quelle valeur (sauf lorsque l'attribut n'a pas été ajouté à l'élément) ? Par exemple, nous souhaitons cibler n'importe quelle balise d'ancrage avec une valeur pour l'attribut "rel".

Réponse : Utiliser le sélecteur d'attribut avec une valeur vide

Pour atteindre ceci, nous pouvons utiliser le sélecteur d'attribut avec une valeur vide. La règle CSS suivante cible toute balise d'ancrage avec un attribut "rel" défini :

a[rel] {
    color: red;
}

Cette règle correspondra aux première et troisième balises d'ancrage dans le code HTML suivant :

<a href="#" rel="eg">red text</a>
<a href="#">standard text</a>
<a href="#" rel="more">red text again</a>

Mise à jour : Distinguer les valeurs vides des valeurs non vides

Dans certains cas, il peut être nécessaire de différencier les éléments ayant un attribut vide valeur et ceux avec une valeur non vide. Pour ce faire, nous pouvons utiliser la pseudo-classe CSS ":not" :

a[rel]:not([rel=""]) {
    color: red;
}

Cette règle ciblera uniquement les balises d'ancrage avec des valeurs d'attribut "rel" non vides.

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!