Comment puis-je sélectionner un élément HTML avec plusieurs classes à l'aide de sélecteurs CSS ?

Ciblage d'éléments avec plusieurs classes à l'aide de sélecteurs CSS

Lorsque vous travaillez avec HTML et CSS, vous pouvez rencontrer des situations dans lesquelles vous devez sélectionner des éléments en fonction sur les valeurs de classes spécifiques. Une exigence courante est de sélectionner des éléments auxquels plusieurs classes leur sont attribuées.

Question :

Étant donné trois divs avec les classes suivantes :

<div class="foo">Hello Foo</div>
<div class="foo bar">Hello World</div>
<div class="bar">Hello Bar</div>

Comment écrire du CSS pour sélectionner uniquement le deuxième élément (avec les classes "foo bar") en utilisant CSS sélecteurs ?

Réponse :

Pour sélectionner des éléments avec plusieurs classes, enchaînez simplement les sélecteurs de classe sans aucun espace entre les deux. Dans cet exemple, le code CSS serait :

.foo.bar {
  /* Styles for element(s) with foo AND bar classes */
}

Ce sélecteur appliquera des styles au deuxième div, car c'est le seul élément auquel les classes "foo" et "bar" lui sont attribuées. .

Remarque supplémentaire :

Les navigateurs plus anciens comme Internet Explorer 6 peuvent ne pas interpréter correctement les sélecteurs de classe chaînés. IE6 lira uniquement le dernier sélecteur de classe et ignorera les autres. Pour garantir la compatibilité avec IE6, vous devez éviter d'utiliser des sélecteurs de classe chaînés et utiliser plutôt des sélecteurs plus spécifiques, tels que :

div.foo.bar {
  /* Styles for element(s) with foo AND bar classes */
}

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!