Wie kann ich CSS verwenden, um einen Absatz nur dann zu formatieren, wenn er direkt auf ein bestimmtes H1-Element folgt?

Verstehen des CSS Adjacent Sibling Selector

Beim Stylen von HTML-Elementen ist die Fähigkeit, bestimmte Elemente basierend auf ihren Beziehungen anzusprechen, von entscheidender Bedeutung. Hier kommt der CSS-Selektor für benachbarte Geschwister ins Spiel.

Problemstellung

Bedenken Sie den folgenden HTML- und CSS-Code:

<h1>

Das Ziel soll sicherstellen, dass jedes

Tag, das auf das h1.hc-reform-Element folgt, hat die Eigenschaft clear: Both.

Falscher Versuch

Der durchgeführte Versuch:

h1.hc-reform > p {
  clear: both;
}

funktioniert nicht, da > Der Selektor wählt nur direkte untergeordnete Elemente aus. In diesem Fall ist das

Tag ist kein direktes untergeordnetes Element des h1.hc-reform-Elements.

Angrenzender Geschwister-Selektor

Um das gewünschte Ergebnis zu erzielen, muss der angrenzende Geschwister-Selektor verwendet werden. Es wird durch ein Pluszeichen ( ) dargestellt.

h1.hc-reform + p {
  clear: both;
}

Dieser Selektor zielt auf Elemente ab, die unmittelbar nach dem angegebenen Element stehen, in diesem Fall das

Tag unmittelbar nach dem h1.hc-reform-Element.

Hinweis: Der angrenzende Geschwisterselektor wird in Internet Explorer 6 und früheren Versionen nicht unterstützt.

Das obige ist der detaillierte Inhalt vonWie kann ich CSS verwenden, um einen Absatz nur dann zu formatieren, wenn er direkt auf ein bestimmtes H1-Element folgt?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!