Sélecteur 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électeur descendant (séparé par des espaces)
Sélecteur d'élément enfant (séparé par le signe supérieur à)
Frère ou sœur adjacent sélecteurs (séparés par des signes plus)
Sélecteurs frères et sœurs normaux (séparés par des tirets)
Sélecteurs descendants
Les sélecteurs descendants correspondent à tous les éléments dignes des éléments descendants.
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">
<style>
div p
{
background-color:#00ff00;
}
</style>
</head>
<body>
<div>
<p>朝辞白帝彩云间</p>
<p>千里江陵一日还</p>
</div>
<p>两岸猿声啼不住</p>
<p>轻舟已过万重山</p>
</body>
</html>Sélecteur d'élément enfant
Comparé aux sélecteurs descendants, les éléments enfants Les sélecteurs (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> :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
div>p
{
background-color:blue;
}
</style>
</head>
<body>
<h1>静夜思</h1>
<div>
<h2>床前明月光</h2>
<p>疑是地上霜</p>
</div>
<div>
<span><p>举头望明月</p></span>
<p>低头思故乡</p>
</div>
</body>
</html>Sélecteur de frères et sœurs adjacents
Sélecteur de frères et sœurs adjacents) peut sélectionner un élément suivant 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> :
<html>
<head>
<meta charset="utf-8">
<style>
div+p+p
{
background-color:yellow;
}
div+p
{
background-color:red;
}
</style>
</head>
<body>
<h1>清明</h1>
<div>
<h2>清明时节雨纷纷</h2>
<p>路上行人欲断魂</p>
</div>
<p>借问酒家何处有</p>
<p>牧童遥指杏花村</p>
</body>
</html>Sélecteur de frères et sœurs adjacents normaux
Sélection de frères et sœurs normaux Le sélecteur sélectionne tous éléments frères adjacents de l’élément spécifié.
L'exemple suivant sélectionne tous les éléments frères adjacents <p> de tous les éléments <div> :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
div~p
{
background-color:yellow;
}
</style>
</head>
<body>
<div>
<p>画</p>
</div>
<div>
<p>远看山有色</p>
<p>近听水无声</p>
</div>
<p>春去花还在</p>
<p>人来鸟不惊</p>
</body>
</html>Adjacent fait référence au suivant, et cela n'a rien à voir avec le précédent. .
section suivante