Regroupement et imbrication CSS

Sélecteurs groupés et imbriqués CSS

Sélecteurs groupés

Il existe de nombreux éléments avec le même style dans la feuille de style.

h1
{
color:green;
}
h2
{
color:green;
}
p
{
color:green;
}

Pour minimiser le code, vous pouvez utiliser des sélecteurs groupés.

Chaque sélecteur est séparé par une virgule.

Dans l'exemple suivant, nous utilisons des sélecteurs groupés pour le code ci-dessus :

Exemple

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
h1,h2,p
{
	color:green;
}
</style>
</head>

<body>
<h1>Hello World!</h1>
<h2>Smaller heading!</h2>
<p>This is a paragraph.</p>
</body>
</html>

Exécuter l'instance»

Cliquez sur le bouton "Exécuter l'instance" pour afficher l'instance en ligne

Sélecteur imbriqué

Cela peut s'appliquer au style du sélecteur à l'intérieur du sélecteur.

Dans l'exemple suivant, trois styles sont définis :

p{ } : Spécifiez un style pour tous les éléments p
.marked{ } : Spécifiez un style pour tous les éléments avec class="marked"
.marked p{ } : Spécifiez un style pour les éléments p dans tous les styles d'éléments class="marked" .
p.marked{ } : Spécifiez un style pour tous les éléments p avec class="marked".

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
p
{
	color:blue;
	text-align:center;
}
.marked
{
	background-color:red;
}
.marked p
{
	color:white;
}
</style>
</head>

<body>
<p>This paragraph has blue text, and is center aligned.</p>
<div class="marked">
<p>This paragraph has not blue text.</p>
</div>
<p>p elements inside a "marked" classed element keeps the alignment style, but has a different text color.</p>
</body>
</html>