如何突出显示标题后的段落
在本指南中,您可以找到如何突出显示紧跟在标题后面的段落。
样式化标题后的第一个段落
一种常见的模式是,文章的第一个段落的样式与其他段落不同。通常,第一个段落会紧跟在标题后面,如果您的设计是这种情况,您可以使用元素的组合来定位该段落。
相邻兄弟选择器
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;
}