Sélecteurs de combinaison CSS
Sélecteur de combinaison CSS
Le sélecteur de combinaison CSS vous permet de comprendre intuitivement la relation entre les sélecteurs.
 | 组合选择符说明了两个选择器直接的关系。 |
|---|
Les sélecteurs de combinaison CSS incluent diverses combinaisons de sélecteurs simples.
contient quatre méthodes de combinaison en CSS3 :
Sélecteur descendant (séparés par des espaces)
Sélecteurs d'éléments enfants (séparés par des espaces) un signe supérieur à)
Sélecteurs frères et sœurs adjacents (séparés par un signe plus)
Sélecteurs frères et sœurs normaux (séparés par un tiret délimité)
Sélecteur descendant
Le sélecteur descendant correspond à tous les éléments descendants d'un élément digne.
L'exemple suivant sélectionne tous les éléments <p> et les insère dans l'élément <div> :
Exemple
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
div p
{
background-color:yellow;
}
</style>
</head>
<body>
<div>
<p>段落 1。 在 div 中。</p>
<p>段落 2。 在 div 中。</p>
</div>
<p>段落 3。不在 div 中。</p>
<p>段落 4。不在 div 中。</p>
</body>
</html>Exécuter l'exemple »
Cliquez sur le bouton « Exécuter l'exemple » pour afficher l'exemple en ligne
Sélecteur d'élément enfant
Sélecteur d'élément enfant par rapport à sélecteur descendant Les sélecteurs enfants ne peuvent sélectionner que les éléments qui sont les enfants d'un élément.
L'exemple suivant sélectionne tous les éléments enfants directs<p> dans l'élément <div> :
Exemple
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
div>p
{
background-color:yellow;
}
</style>
</head>
<body>
<h1>Welcome to My Homepage</h1>
<div>
<h2>My name is Donald</h2>
<p>I live in Duckburg.</p>
</div>
<div>
<span><p>I will not be styled.</p></span>
</div>
<p>My best friend is Mickey.</p>
</body>
</html>Exécuter l'instance»
Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne
Sélecteur de frère adjacent
Sélecteur de frère adjacent) peut sélectionner un élément qui suit immédiatement un autre élément, et les deux ont le même élément parent.
Si vous devez sélectionner un élément immédiatement après un autre élément et que les deux ont le même élément parent, vous pouvez utiliser le sélecteur de frère adjacent.
L'exemple suivant sélectionne tous les premiers éléments <p> après l'élément <div> :
Exemple
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
div+p
{
background-color:yellow;
}
</style>
</head>
<body>
<h1>Welcome to My Homepage</h1>
<div>
<h2>My name is Donald</h2>
<p>I live in Duckburg.</p>
</div>
<p>My best friend is Mickey.</p>
<p>I will not be styled.</p>
</body>
</html>Exécuter l'instance»
Cliquez sur le bouton "Exécuter l'instance" pour afficher l'instance en ligne
Sélecteur de frère suivant
Le sélecteur de frère suivant sélectionne tous les éléments frères et sœurs adjacents après l'élément spécifié.
L'exemple suivant sélectionne tous les éléments frères adjacents<p> après tous les éléments <div> :
Exemple
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
div~p
{
background-color:yellow;
}
</style>
</head>
<body>
<div>
<p>段落 1。 在 div 中。</p>
<p>段落 2。 在 div 中。</p>
</div>
<p>段落 3。不在 div 中。</p>
<p>段落 4。不在 div 中。</p>
</body>
</html>Exécuter l'instance»
Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne
