如何高亮标题后面的段落

在本指南中,你可以了解如何高亮紧接标题之后的段落。

¥In this guide you can find out how to highlight a paragraph that comes directly after a heading.

设置标题后第一段的样式

¥Styling the first paragraph after a heading

一种常见的模式是将文章中第一段的样式设置为与其后的段落不同的样式。通常,第一段将紧接在标题之后,如果你的设计中出现这种情况,你可以使用该元素组合来定位该段落。

¥A common pattern is to style the first paragraph in an article differently to the ones that come after it. Usually this first paragraph will come right after a heading, and if this is the case in your design you can use that combination of elements to target the paragraph.

下一个兄弟组合器

¥The next-sibling combinator

CSS 有一组 CSS 选择器,它们被称为组合器,因为它们根据选择器的组合来选择事物。在我们的例子中,我们将使用 下一个兄弟组合器。该组合器根据一个元素是否与另一个元素相邻来选择该元素。在我们的 HTML 中,我们有一个 h1,后面跟着一个 <p><p><h1> 的下一个兄弟,因此我们可以使用 h1 + p 选择它。

¥CSS has a group of CSS Selectors which are referred to as combinators, because they select things based on a combination of selectors. In our case, we will use the next-sibling combinator. This combinator selects an element based on it being next to another element. In our HTML we have a h1 followed by a <p>. The <p> is the next sibling of the <h1> so we can select it with h1 + p.

也可以看看