Sélecteurs de combinaison CSS
Sélecteur de combinaison CSS
Le sélecteur de combinaison illustre la relation directe entre deux sélecteurs.
Les sélecteurs de combinaison CSS incluent diverses combinaisons de sélecteurs simples.
contient quatre méthodes de combinaison en CSS3 :
Sélecteurs descendants (séparés par des espaces)
Sélecteurs d'éléments enfants (séparés par 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 des tirets)
Sélecteur de descendants
Le sélecteur de descendants correspond aux descendants de tous les éléments dignes.
L'exemple suivant sélectionne tous les éléments p et les insère dans l'élément div :
<!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écutez le programme et observez
Sélecteurs enfants
Par rapport aux sélecteurs descendants, les sélecteurs enfants ne peuvent sélectionner que des éléments qui sont des enfants d'un élément.
L'exemple suivant sélectionne tous les éléments enfants directs<p> dans l'élément <div> :
<!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écutez le programme et observez
Sélecteur de frères et sœurs adjacents
Le sélecteur de frères et sœurs adjacents peut sélectionner un élément immédiatement après 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> :
<!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écutez le programme et observez
Sélecteur de frère voisin normal
Le sélecteur de frère normal sélectionne tous les éléments frères adjacents de l'élément spécifié.
L'exemple suivant sélectionne tous les éléments frères <p> adjacents de tous les éléments <div> :
<!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écutez le programme et observez
![Projet front-end-Shangyou [Pratique complète de la technologie HTML/CSS/JS]](https://img.php.cn/upload/course/000/000/068/63bfcb2974f91471.jpg)
![Cours frontal base zéro [Vue apprentissage avancé et application pratique]](https://img.php.cn/upload/course/000/000/068/63bbd15353895588.jpg)
![Tutoriel WEB front-end [HTML5+CSS3+JS]](https://img.php.cn/upload/course/000/000/068/63ba60c8da520536.jpg)
![Application pratique Apipost [api, interface, tests automatisés, mock]](https://img.php.cn/upload/course/000/000/068/63b3c967a20f4861.jpg)
