如何高亮第一段

在本指南中,您可以瞭解如何在容器內高亮第一段。

樣式化第一段

您希望將第一段的字型變大並加粗。您可以為第一段新增一個類,然後透過該類來選擇它,但使用偽類選擇器更靈活——它意味著您可以根據段落的文件位置來定位它,並且如果源順序發生更改,您無需手動移動類。

使用偽類

一個 偽類 的作用就像您應用了一個類一樣;然而,CSS 不是使用類選擇器,而是根據文件結構進行選擇。有許多不同的偽類可以選擇不同的內容。在我們的例子中,我們將使用 :first-child。這將選擇父元素的第一個子元素。

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 {
  font-weight: bold;
  font-size: 130%;
}

您可以嘗試在上面的即時示例中將 :first-child 更改為 :last-child,您將選中最後一個段落。

每當您需要定位文件中的某個內容時,您可以檢視是否有可用的 偽類 可以幫您完成。

另見