Anleitung: Hervorheben eines Absatzes nach einer Überschrift
In diesem Leitfaden erfahren Sie, wie Sie einen Absatz hervorheben können, der direkt nach einer Überschrift folgt.
Stil des ersten Absatzes nach einer Überschrift
Ein häufiger Stil ist es, den ersten Absatz in einem Artikel anders zu gestalten als die folgenden Absätze. Üblicherweise folgt dieser erste Absatz direkt auf eine Überschrift, und wenn dies in Ihrem Design der Fall ist, können Sie diese Kombination von Elementen verwenden, um den Absatz gezielt anzusprechen.
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 werden wir den Nachbar-Kombinator verwenden. Dieser Kombinator wählt ein Element basierend darauf aus, dass es neben einem anderen Element steht. In unserem HTML haben wir ein h1 gefolgt von einem <p>. Das <p> ist das nächste Geschwisterelement 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;
}