如何突出顯示標題後的段落
在本指南中,您可以找到如何突出顯示緊跟在標題後面的段落。
樣式化標題後的第一個段落
一種常見的模式是,文章的第一個段落的樣式與其他段落不同。通常,第一個段落會緊跟在標題後面,如果您的設計是這種情況,您可以使用元素的組合來定位該段落。
相鄰兄弟選擇器
CSS 中有一組被稱為組合器的CSS 選擇器,因為它們基於選擇器的組合來選擇元素。在我們的案例中,我們將使用相鄰兄弟選擇器。此選擇器根據元素是否緊鄰另一個元素來選擇元素。在我們的 HTML 中,有一個 h1 後面跟著一個 <p>。<p> 是 <h1> 的下一個兄弟元素,因此我們可以使用 h1 + p 來選擇它。
html
<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>
css
.wrapper h1 + p {
font-weight: bold;
font-size: 130%;
color: rebeccapurple;
}