CSS Adjazenter Bruder-Selektoren

Der Adjazenzoperator (Adjacent sibling selector) kann Elemente auswählen, die unmittelbar nach einem anderen Element folgen und denselben Elternteil haben.

Wählen Sie Nachbarschaftsbrüder

Wenn Sie einen Element, das unmittelbar nach einem anderen Element folgt und das denselben Elternteil hat, auswählen müssen, können Sie den Adjazenzoperator (Adjacent sibling selector) verwenden.

Zum Beispiel, um den oberen Abstand des Absatzes, der unmittelbar nach dem h1-Element erscheint, zu erhöhen, kann man so schreiben:

h1 + p {margin-top:50px;}

Dieser Auswahler wird so gelesen: „Wählen Sie den Absatz, der unmittelbar nach dem h1-Element erscheint, und der mit dem h1- und p-Elementen denselben Elternteil hat.“

Probieren Sie es selbst aus

Grammatikexplanation

Der Adjazenzoperator ist der Pluszeichen (+), also der Adjazenzoperator (Adjacent sibling combinator).

Anmerkung:Wie die Nachbarschaftsoperator, kann neben dem Adjazenzoperator auch ein Leerzeichen stehen.

Bitte sehen Sie den folgenden Dokumentbaumschnitt unten:

<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 Abschnitt enthält der div-Element zwei Listen: eine Aufzählungsliste und eine Nummerierte Liste, jede Liste enthält drei Listeinträge. Diese beiden Listen sind benachbarte Brüder, die Listeinträge selbst sind auch benachbarte Brüder. Allerdings sind die Listeinträge der ersten Liste und der Listeinträge der zweiten Liste nicht benachbarte Brüder, da diese两组 Listeinträge nicht demselben Elternteil gehören (höchstens Cousin von einander).

Denken Sie daran, dass mit einem Bindungsoperator nur der zweite Element der zwei benachbarten Brüder ausgewählt werden kann. Sehen Sie sich den folgenden Selektor an:

li + li {font-weight:bold;}

Dieser Selektor wird nur die zweite und dritte Liste der Liste in fett umwandeln. Der erste Listeneintrag wird nicht beeinflusst.

Probieren Sie es selbst aus

Kombination mit anderen Selektoren

Der Adjazenter Bruder-Bindungsoperator kann auch mit anderen Bindungsoperatoren kombiniert werden:

html > body table + ul {margin-top:20px;}

Dieser Selektor wird so interpretiert: Wählen Sie alle Brüder ul, die unmittelbar nach einem table-Element erscheinen, das in einem body-Element enthalten ist und das selbst ein Kind des html-Elements ist.