Maison >interface Web >tutoriel CSS >Quand utiliser le sélecteur de frères et sœurs adjacents CSS
Quand utiliser le sélecteur de frères et sœurs adjacents CSS
- (*-*)浩original
- 2019-12-30 16:16:433203parcourir
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 .
Sélectionnez les frères et sœurs adjacents (Apprentissage recommandé : Tutoriel CSS)
Si vous devez sélectionner un élément immédiatement après un autre élément, et les deux Si les deux ont le même élément parent, vous pouvez utiliser le sélecteur de frère adjacent.
Par exemple, si vous souhaitez augmenter la marge supérieure du paragraphe qui apparaît immédiatement après l'élément h1, vous pouvez écrire :
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
h1 + p {margin-top:50px;}
</style>
</head>
<body>
<h1>This is a heading.</h1>
<p>This is paragraph.</p>
<p>This is paragraph.</p>
<p>This is paragraph.</p>
<p>This is paragraph.</p>
<p>This is paragraph.</p>
</body>
</html>Ce sélecteur lit : " Sélectionnez immédiatement Un paragraphe qui apparaît après un élément h1. Les éléments h1 et p ont un élément parent commun."
Explication de la syntaxe :
Le sélecteur de frère adjacent utilise le signe plus (+), qui est le combinateur de frère adjacent.
Remarque : Comme les symboles de sous-combinaison, il peut y avoir des caractères vides à côté des symboles de combinaison frères et sœurs adjacents.
Regardez le fragment d'arborescence du document ci-dessous :
<div>
<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
<ol>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ol>
</div>Dans le fragment ci-dessus, l'élément div contient deux listes : une liste non ordonnée et une liste ordonnée, chaque liste contient trois éléments de liste. Les deux listes sont des frères et sœurs adjacents, tout comme les éléments de la liste eux-mêmes.
Cependant, les éléments de la première liste et les éléments de la deuxième liste ne sont pas des frères et sœurs adjacents, car les deux ensembles d'éléments de la liste n'appartiennent pas au même élément parent (ils ne peuvent être considérés que comme des cousins tout au plus).
Rappelez-vous que seul le deuxième élément de deux frères et sœurs adjacents peut être sélectionné avec un combinateur. Jetez un œil au sélecteur ci-dessous :
li + li {font-weight:bold;}Le sélecteur ci-dessus ne mettra en gras que les deuxième et troisième éléments de la liste. Le premier élément de la liste n’est pas affecté.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!