CSS peut-il cibler des éléments avec n'importe quelle valeur d'attribut ?

Le ciblage des valeurs d'attribut CSS simplifié

Dans le domaine du style des pages Web, les attributs CSS jouent un rôle central dans la définition de l'apparence et du comportement des éléments HTML. Bien que nous rencontrions souvent des situations dans lesquelles nous devons cibler des éléments avec des valeurs d'attribut spécifiques, que se passe-t-il si nous devons appliquer des styles à des éléments avec n'importe quel ensemble d'attributs, quelle que soit sa valeur ?

Le CSS peut-il cibler des éléments avec des attributs de n'importe quelle valeur ?

Plongeons dans la question, qui demande s'il est possible de sélectionner des éléments avec des attributs de n'importe quelle valeur. Imaginez le code HTML suivant :

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

Le but est de cibler le premier et le troisième balises avec du texte rouge en utilisant CSS. Intuitivement, nous pourrions essayer :

a[rel=*]
{
  color: red;
}

Cependant, ce sélecteur ne fonctionnera pas. Heureusement, nous avons une solution alternative.

Le sélecteur d'attribut universel

Le sélecteur d'attribut universel CSS, désigné par un simple crochet ([ ]), correspond à n'importe quel élément avec l'ensemble d'attributs spécifié, quelle que soit sa valeur. Pour notre objectif, nous pouvons utiliser :

a[rel]
{
  color: red;
}

Ce sélecteur ciblera avec succès tous les balises avec un attribut rel, appliquant la couleur rouge au texte souhaité.

Gestion des valeurs d'attribut vides

Dans certains cas, nous pouvons avoir besoin de faire la différence entre les valeurs d'attribut vides et non vides. C'est ici que la pseudo-classe :not() est utile. Avec :not(), nous pouvons exclure les éléments avec des valeurs d'attribut vides, ce qui conduit à un ciblage plus précis.

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

Ce sélecteur amélioré garantit que seuls ceux les balises avec des attributs rel non vides seront affectées par nos changements de style.

Donc, voilà. La sélection d'attributs universels CSS vous permet de cibler sans effort des éléments avec n'importe quel attribut défini, rendant vos styles plus polyvalents et adaptables.

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!