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

Sélecteur CSS pour cibler des éléments avec plusieurs classes

Déterminer si un élément satisfait à des critères spécifiques est crucial lorsque l'on travaille avec CSS. Un de ces scénarios consiste à identifier des éléments appartenant à deux ou plusieurs classes spécifiques. Cet article fournit une solution simple à ce problème, ainsi que des considérations de compatibilité avec le navigateur.

Pour sélectionner un élément comportant plusieurs classes, utilisez la syntaxe du sélecteur de classe CSS. Enchaînez simplement les noms de classes sans les séparer par un espace. Par exemple, pour sélectionner un élément avec les classes "foo" et "bar" :

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

Cependant, les interpréteurs d'Internet Explorer 6 ont enchaîné les sélecteurs de classe différemment. Pour ce navigateur, seul le dernier sélecteur de classe sera reconnu. Pour garantir la compatibilité, pensez à utiliser le code suivant :

* {
  color: black;
}

.foo.bar {
  color: red;
}

Ce code attribue la couleur "rouge" aux éléments avec les classes "foo" et "bar", tandis que tous les autres éléments conservent la couleur "noir" par défaut. couleur. La mise en œuvre de cette approche permet un style cohérent dans différents navigateurs, y compris IE6.

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!