如何突出第一段

在本指南中,你可以了解如何高亮容器内的第一段。

¥In this guide you can find out how to highlight the first paragraph inside a container.

设置第一段的样式

¥Styling the first paragraph

你想让第一段更大、更粗。你可以将一个类添加到第一段并以这种方式选择它,但是使用伪类选择器更灵活 - 这意味着你可以根据段落在文档中的位置来定位该段落,而无需手动 如果源顺序发生变化,则移动该类。

¥You would like to make the first paragraph larger and bold. You could add a class to the first paragraph and select it that way, however using a pseudo-class selector is more flexible — it means that you can target the paragraph based on its location in the document, and you won't have to manually move the class if the source order changes.

使用伪类

¥Using a pseudo-class

pseudo-class 的行为就好像你已经申请了一个类别;然而,CSS 并没有使用类选择器,而是根据文档结构进行选择。有许多不同的伪类可以选择不同的东西。在我们的例子中,我们将使用 :first-child。这将选择作为父元素的第一个子元素的元素。

¥A pseudo-class acts as if you have applied a class; however, rather than using a class selector CSS selects based on the document structure. There are a number of different pseudo-classes that can select different things. In our case we are going to use :first-child. This will select the element that is the first-child of a parent.

你可以尝试将上面的实例中的 :first-child 更改为 :last-child,然后你将选择最后一段。

¥You can try changing :first-child to :last-child in the live example above, and you will select the last paragraph.

每当你需要在文档中定位某些内容时,你都可以检查可用的 pseudo-classes 之一是否可以为你做到这一点。

¥Whenever you need to target something in your document, you can check to see if one of the available pseudo-classes can do it for you.

也可以看看