Anleitung zur Hervorhebung eines Absatzes nach einer Überschrift
In diesem Leitfaden erfahren Sie, wie Sie einen Absatz hervorheben, der direkt nach einer Überschrift folgt.
Stil des ersten Absatzes nach einer Überschrift
Ein häufiges Muster besteht darin, den ersten Absatz eines Artikels anders zu gestalten als die folgenden Absätze. Normalerweise kommt dieser erste Absatz direkt nach einer Überschrift, und falls dies in Ihrem Design der Fall ist, können Sie diese Kombination von Elementen verwenden, um den Absatz zu erfassen.
Der Nachbar-Kombinator
CSS verfügt über eine Gruppe von CSS-Selektoren, die als Kombinatoren bezeichnet werden, weil sie Dinge basierend auf einer Kombination von Selektoren auswählen. In unserem Fall verwenden wir den Nachbar-Kombinator. Dieser Kombinator wählt ein Element aus, basierend darauf, dass es neben einem anderen Element ist. In unserem HTML haben wir ein h1 gefolgt von einem <p>. Das <p> ist der nächste Nachbar des <h1>, daher können wir es mit h1 + p auswählen.
<div class="wrapper">
<h1>A heading</h1>
<p>
Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion
daikon amaranth tatsoi tomatillo melon azuki bean garlic.
</p>
<p>
Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette
tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato.
Dandelion cucumber earthnut pea peanut soko zucchini.
</p>
</div>
.wrapper h1 + p {
font-weight: bold;
font-size: 130%;
color: rebeccapurple;
}