如何突出顯示標題後的段落

在本指南中,您可以找到如何突出顯示緊跟在標題後面的段落。

樣式化標題後的第一個段落

一種常見的模式是,文章的第一個段落的樣式與其他段落不同。通常,第一個段落會緊跟在標題後面,如果您的設計是這種情況,您可以使用元素的組合來定位該段落。

相鄰兄弟選擇器

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;
}

另見