Combinaison et imbrication du didacticiel intermédiaire CSS

combinaison

Vous n'êtes pas obligé de répéter plusieurs sélecteurs avec les mêmes attributs, il vous suffit de séparer les sélecteurs par des virgules (,).
Par exemple, vous avez le code suivant :

h2 { couleur : rouge ; } .thisAutreClasse { couleur : rouge ; } .etUneAutreClasse { couleur : rouge ; }

Ensuite, vous pouvez écrire :

h2, .thisAutreClasse, .yetAnotherClass { couleur : rouge ; }

Imbriqué

Si CSS est bien structuré, il n'est pas nécessaire d'utiliser trop de classes ou de sélecteurs d'identifiants. En effet, vous pouvez spécifier des sélecteurs dans les sélecteurs. (Ou mieux dit, sélecteur de contexte - par traducteur)
Par exemple:

#haut { couleur d'arrière-plan : #ccc ; rembourrage : 1em } #haut h1 { couleur : #ff0 ; } #haut p { couleur : rouge ; poids de la police : gras ; }

Cela élimine les sélecteurs de classe ou d'identifiant inutiles s'ils sont appliqués au HTML comme ceci :

<div id="top"> <h1>Curry au chocolat</h1> <p>C'est ma recette pour faire du curry purement avec du chocolat</p> <p>Mmm mm mmmmm</p> </div>

En effet, en utilisant des sélecteurs anglais séparés par des espaces demi-largeur, nous spécifions que h1 dans l'ID ID a la couleur "#ff0", tandis que p est rouge et gras.
Cela peut aussi être un peu compliqué (puisqu'il peut y avoir plus de deux niveaux, comme à l'intérieur à l'intérieur à l'intérieur à l'intérieur à l'intérieur, etc.). Vous devez vous entraîner davantage.