Heim >Web-Frontend >CSS-Tutorial >Wann sollte der CSS-Selektor für benachbarte Geschwister verwendet werden?
Wann sollte der CSS-Selektor für benachbarte Geschwister verwendet werden?
- (*-*)浩Original
- 2019-12-30 16:16:433182Durchsuche
Der Selektor für benachbarte Geschwister kann ein Element unmittelbar nach einem anderen Element auswählen, und beide haben dasselbe übergeordnete Element .
Benachbarte Geschwister auswählen (Empfohlenes Lernen: CSS-Tutorial)
Wenn Sie ein Element unmittelbar nach einem anderen Element auswählen müssen, und die beiden Wenn Wenn beide das gleiche übergeordnete Element haben, können Sie den Selektor „Angrenzende Geschwister“ verwenden.
Wenn Sie beispielsweise den oberen Rand des Absatzes vergrößern möchten, der unmittelbar nach dem h1-Element erscheint, können Sie schreiben:
<!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>Dieser Selektor lautet: „ Wählen Sie sofort einen Absatz aus, der nach einem h1-Element erscheint. Die h1- und p-Elemente haben ein gemeinsames übergeordnetes Element.
Syntaxerklärung:
Der benachbarte Geschwisterselektor verwendet das Pluszeichen (+), das den benachbarten Geschwisterkombinator darstellt.
Hinweis: Wie Unterkombinationssymbole können benachbarte Geschwisterkombinationssymbole Leerzeichen neben sich haben.
Sehen Sie sich das Dokumentbaumfragment unten an:
<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>Im obigen Fragment enthält das div-Element zwei Listen: eine ungeordnete Liste und eine geordnete Liste. Jede Liste enthält drei Listenelemente. Die beiden Listen sind benachbarte Geschwister, ebenso wie die Listenelemente selbst.
Allerdings sind die Listenelemente in der ersten Liste und die Listenelemente in der zweiten Liste keine benachbarten Geschwister, da die beiden Sätze von Listenelementen nicht zum selben übergeordneten Element gehören (sie können nur als Cousins betrachtet werden). höchstens).
Denken Sie daran, dass mit einem Combiner nur das zweite Element zweier benachbarter Geschwister ausgewählt werden kann. Schauen Sie sich den Selektor unten an:
li + li {font-weight:bold;}Der obige Selektor macht nur das zweite und dritte Listenelement in der Liste fett. Das erste Listenelement ist nicht betroffen.
Das obige ist der detaillierte Inhalt vonWann sollte der CSS-Selektor für benachbarte Geschwister verwendet werden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!