如何突出显示标题后的段落

在本指南中,您可以找到如何突出显示紧跟在标题后面的段落。

样式化标题后的第一个段落

一种常见的模式是,文章的第一个段落的样式与其他段落不同。通常,第一个段落会紧跟在标题后面,如果您的设计是这种情况,您可以使用元素的组合来定位该段落。

相邻兄弟选择器

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

另见