Regroupement CSS et sélecteurs imbriqués
Regroupement de sélecteurs
Supposons que vous souhaitiez que l'élément h2 et le paragraphe soient gris. Pour y parvenir, le plus simple à faire est d'utiliser la déclaration suivante :
h2, p {color:gray;}
Changer les h2 et p sélecteurs Placez-le à gauche de la règle et séparez-le par des virgules pour définir une règle. Le style à droite (color:gray;) sera appliqué aux éléments référencés par ces deux sélecteurs. La virgule indique au navigateur que la règle contient deux sélecteurs différents. Sans cette virgule, le sens de la règle serait complètement différent. Voir sélecteur de descendants.
Vous pouvez regrouper n'importe quel nombre de sélecteurs sans aucune restriction.
Par exemple, si vous souhaitez rendre de nombreux éléments gris, vous pouvez utiliser une règle comme celle-ci :
body, h2, p, table, th, td, pre, strong , em {color:gray;}
Conseil : en regroupant, les auteurs peuvent « compresser » certains types de styles ensemble, ce qui donne une feuille de style plus concise.
Les deux ensembles de règles suivants permettront d'obtenir le même résultat, mais il est clair lequel est le plus facile à écrire :
/* pas de regroupement */
h1 {color :bleu;} h2 {couleur:bleu;} h3 {couleur:bleu;} h4 {couleur:bleu;} h5 {couleur:bleu;} h6 {couleur:bleu;}
/* regroupement */
h1, h2, h3, h4, h5, h6 {couleur:bleu;>
Exemple :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>实例</title>
<style type="text/css">
h1, h2, h3, h4, h5, p{
color:purple;
font-size:15px;
}
h2.special, .special, #one{
text-decoration:underline;
}
</style>
</head>
<body>
<h1>集体声明h1</h1>
<h2 class="special">集体声明h2</h2>
<h3>集体声明h3</h3>
<h4>集体声明h4</h4>
<h5>集体声明h5</h5>
<p>集体声明p1</p>
<p class="special">集体声明p2</p>
<p id="one">集体声明p3</p>
</body>
</html> Sélecteur imbriqué
Résumé des règles d'utilisation :
1. ID de classe imbriquée #myid.myclass : <p id="sp" class="myclass"></p>.
2. Une balise d'élément utilise plusieurs classes. .important.warning <p class="important warning">Veillez à ne pas inclure d'espaces. Il y a des espaces pour indiquer qu'ils s'appliquent respectivement à deux classes.
3. L'élément de classe dans la balise id. #myid .myclass <div id="myid"><p class="myclass"></p></div>
4. p .myclass <p><span class="myclass"></span></p>
4. p #myid<p><span id="myid"></span></p>
5. .myclass span <p class="myclass"><span>dd</span></p>
6. La balise id dans la balise id #myid #myid2 <div id="myid " ><div id="myid2"></div></div>. L'utilisation de id est similaire à celle des balises d'élément.
7. .myclass1 .myclass2 signifie que deux classes utilisent le même style au lieu de s'imbriquer. Les classes peuvent également être imbriquées dans des classes. Mais s'il n'y a pas d'espace entre les deux .myclasses, cela signifie que vous avez les deux classes
8. Balise d'élément balise d'élément imbriquée p span <p><span></span></p>
Exemple :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>实例</title>
<style type="text/css">
#top {
background-color: #ccc;
padding: 1em
}
#top h1 {
color: #ff0;
}
#top p {
color: red;
font-weight: bold;
}
</style>
</head>
<body>
<div id="top">
<h1>Chocolate curry</h1>
<p>This is my recipe for making curry purely with chocolate</p>
<p>Mmm mm mmmmm</p>
</div>
</body>
</html>
