communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français

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



Formation continue
||
<!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>
soumettreRéinitialiser le code
Section précédente section suivante
Liste des didacticiels
obtenir de l'aide
  • Recommandations de cours
  • Téléchargement du didacticiel
Le didacticiel n'est pas disponible au téléchargement pour le moment. Le staff est actuellement en train de l'organiser. Veuillez prêter plus d'attention à ce cours à l'avenir ~

Les étudiants qui ont regardé ce cours apprennent également

Le dernier didacticiel vidéo ThinkPHP 5.1 en première mondiale (60 jours pour devenir un expert PHP en ligne)  492969 joue