如何高亮段落的第一行
在本指南中，您将了解如何高亮段落中的第一行文本，即使您不知道该行的长度。
设置文本第一行的样式
您想让段落的第一行更大更粗。用 `<span>` 标签包裹第一行意味着您可以随意设置其样式，但是，如果由于视口大小减小导致第一行变短，则样式化的文本将换到下一行。
使用伪元素
一个 伪元素 可以替代 `<span>` 标签；然而，它更灵活 — 伪元素所选择的精确内容是在浏览器渲染内容后计算的，因此即使视口大小发生变化，它也能正常工作。
在这种情况下，我们需要使用 ::first-line 伪元素。它会选中每个段落的第一个格式化行，这意味着您可以按需设置其样式。
html
<div class="wrapper">
<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 p::first-line {
font-weight: bold;
font-size: 130%;
}
注意：所有伪元素都是这样工作的。它们的行为就像您在文档中插入了一个元素，但它们是动态地根据运行时显示的内容来工作的。
将伪元素与其他选择器结合使用
在上面的示例中，伪元素会选中每个段落的第一行。要只选中第一个段落的第一行，您可以将其与其他选择器结合使用。在这种情况下，我们使用 :first-child 伪类。这使我们能够选中 `.wrapper` 的第一个子元素的第一个格式化行，前提是该第一个子元素是一个段落。
html
<div class="wrapper">
<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 p:first-child::first-line {
font-weight: bold;
font-size: 130%;
}
另见
- 伪元素参考页面。
- 学习 CSS：伪类和伪元素.