Comment puis-je cibler des éléments avec plusieurs classes à l'aide de sélecteurs CSS ?

Sélecteurs CSS pour les éléments avec plusieurs classes

Déterminer les moyens de cibler les éléments avec des combinaisons de classes spécifiques en CSS peut être une exigence courante dans le développement Web . Considérez ce scénario dans lequel trois éléments div ont des combinaisons de classes différentes :

<br><div><div class="foo bar">Hello World</div><br>&lt ;div>

La tâche consiste à sélectionner le deuxième élément, qui a à la fois les foo et classes de barres.

Solution : Sélecteurs de classe chaînés

Pour y parvenir, les sélecteurs CSS fournissent une solution simple : chaîner des sélecteurs de classe. Écrivez simplement les noms de classe ensemble, sans aucun espace, comme dans ce code :

.foo.bar {
  /* Styles for elements with both foo and bar classes */
}

Ce sélecteur ne s'appliquera qu'au deuxième élément div dans le HTML fourni, car c'est le seul élément qui possède les deux classes. .

Attention pour Internet Explorer 6

Cependant, il est important de noter qu'Internet Explorer 6 comporte une mise en garde quand il s'agit de sélecteurs de classe chaînés. Il ne reconnaît que le dernier sélecteur de classe de la chaîne, ignorant les précédents. Dans l'exemple ci-dessus, IE6 n'appliquera les styles qu'aux éléments avec la classe bar, pas aux éléments qui ont également la classe foo.

Exemple

Considérez ce qui suit extrait :

*{
  color:black;
}

.foo.bar {
  color:red;
}

<div>

Dans ce scénario, les navigateurs non-IE6 appliqueront la couleur rouge au deuxième div, tandis qu'IE6 l'appliquera à la troisième div puisqu'elle ne considère que la classe bar. Ce comportement peut être particulièrement important à prendre en compte si la prise en charge des navigateurs plus anciens est une exigence.

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!