Hướng dẫn what is nth child in css? - con thứ n trong css là gì?

Thử nó

Cú pháp

Phân loại giả nth-of-type được chỉ định với một đối số duy nhất, đại diện cho mẫu cho các phần tử phù hợp.

Xem :nth-child để biết giải thích chi tiết hơn về cú pháp của nó.

:nth-of-type( <an-plus-b> | even | odd )

Ví dụ

Ví dụ cơ bản

HTML

<div>
  <div>This element isn't counted.</div>
  <p>1st paragraph.</p>
  <p class="fancy">2nd paragraph.</p>
  <div>This element isn't counted.</div>
  <p class="fancy">3rd paragraph.</p>
  <p>4th paragraph.</p>
</div>

CSS

/* Odd paragraphs */
p:nth-of-type(2n + 1) {
  color: red;
}

/* Even paragraphs */
p:nth-of-type(2n) {
  color: blue;
}

/* First paragraph */
p:nth-of-type(1) {
  font-weight: bold;
}

/* This will match the 3rd paragraph as it will match elements which are 2n+1 AND have a class of fancy.
The second paragraph has a class of fancy but is not matched as it is not :nth-of-type(2n+1) */
p.fancy:nth-of-type(2n + 1) {
  text-decoration: underline;
}

Kết quả

Lưu ý: Không có cách nào để chọn lớp thứ n bằng bộ chọn này. Bộ chọn chỉ nhìn vào loại khi tạo danh sách các trận đấu. Tuy nhiên, bạn có thể áp dụng CSS cho một phần tử dựa trên vị trí :nth-of-type và một lớp, như được hiển thị trong ví dụ trên. There is no way to select the nth-of-class using this selector. The selector looks at the type only when creating the list of matches. You can however apply CSS to an element based on :nth-of-type location and a class, as shown in the example above.

Xem thêm