How to highlight the first paragraph

Định kiểu đoạn văn đầu tiên

Bạn muốn làm cho đoạn văn đầu tiên trở nên lớn hơn và in đậm. Bạn có thể thêm một class vào đoạn văn đầu tiên và chọn nó theo cách đó, tuy nhiên sử dụng pseudo-class selector linh hoạt hơn — điều này có nghĩa là bạn có thể nhắm mục tiêu đoạn văn dựa trên vị trí của nó trong tài liệu, và bạn sẽ không phải di chuyển class thủ công nếu thứ tự nguồn thay đổi.

Sử dụng pseudo-class

Một pseudo-class hoạt động như thể bạn đã áp dụng một class; tuy nhiên, thay vì sử dụng class selector, CSS chọn dựa trên cấu trúc tài liệu. Có nhiều pseudo-class khác nhau có thể chọn những thứ khác nhau. Trong trường hợp của chúng ta, chúng ta sẽ sử dụng :first-child. Điều này sẽ chọn phần tử là phần tử con đầu tiên của một phần tử cha.

<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>

.wrapper p:first-child {
  font-weight: bold;
  font-size: 130%;
}

Bạn có thể thử thay đổi :first-child thành :last-child trong ví dụ trực tiếp ở trên, và bạn sẽ chọn đoạn văn cuối cùng.

Bất cứ khi nào bạn cần nhắm mục tiêu một thứ gì đó trong tài liệu của mình, bạn có thể kiểm tra xem một trong những pseudo-classes có sẵn có thể làm điều đó cho bạn không.

Xem thêm

• Trang tham khảo pseudo-classes.
• Learn CSS: Pseudo-classes and pseudo-elements.