如何高亮段落的第一行
在本指南中，您將瞭解如何高亮段落中的第一行文字，即使您不知道該行的長度。
設定文字第一行的樣式
您想讓段落的第一行更大更粗。用 `<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：偽類和偽元素.