Sélecteurs de combinaison CSS
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>輕舟已過(guò)萬(wàn)重山</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>低頭思故鄉(xiāng)</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>清明時(shí)節(jié)雨紛紛</h2>
<p>路上行人欲斷魂</p>
</div>
<p>借問(wèn)酒家何處有</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>畫(huà)</p>
</div>
<div>
<p>遠(yuǎn)看山有色</p>
<p>近聽(tīng)水無(wú)聲</p>
</div>
<p>春去花還在</p>
<p>人來(lái)鳥(niǎo)不驚</p>
</body>
</html>Adjacent fait référence au suivant, et cela n'a rien à voir avec le précédent. .
