pseudo-class CSS :nth-of-type()

定 nghĩa và cách sử dụng

CSS :nth-of-type(n) Pseudo-class được sử dụng để khớp phần tử con là phần tử con cùng loại (tên thẻ) của phần tử cha thứ n phần tử con của mỗi phần tử.

n Có thể là một số hoặc chỉ số, một từ khóa (lẻ hoặc chẵn) hoặc một công thức (như an + b)

Lưu ý:Xem :nth-child() Pseudo-class để chọn phần tử con là phần tử con thứ n phần tử con của phần tử nào đó, bất kể loại của nó là gì.

Mô hình

Ví dụ 1

Cách sử dụng :nth-of-type() Chọn bộ lọc:

/* Chọn phần tử div anh em thứ hai */
div:nth-of-type(2) {
  background: red;
}
/* Chọn phần tử li thứ hai trong danh sách */
li:nth-of-type(2) {
  background: lightgreen;
}
/* Chọn bất kỳ phần tử anh em trong nhóm phần tử nào có mỗi phần tử thứ ba */
:nth-of-type(3) {
  background: yellow;
}

Thử ngay

Ví dụ 2

lẻ và chẵn Là từ khóa, có thể được sử dụng để khớp các phần tử con có chỉ số lẻ hoặc chẵn (chỉ số của phần tử con đầu tiên là 1).

Ở đây, chúng ta chỉ định màu nền khác nhau cho các phần tử <p> có chỉ số lẻ và chẵn:

p:nth-of-type(odd) {
  background: red;
}
p:nth-of-type(even) {
  background: blue;
}

Thử ngay

Ví dụ 3

Sử dụng công thức (an + b)a Đại diện cho giá trị dịch chuyển nguyên, n là tất cả các số nguyên dương bắt đầu từ 0,b Là giá trị dịch chuyển nguyên

Ở đây, chúng ta chỉ định màu nền cho tất cả các phần tử <p> có chỉ số là bội số của 3 (sẽ chọn phần tử thứ ba, thứ sáu, thứ chín, v.v.):

p:nth-of-type(3n+0) {
  background: red;
}

Thử ngay

Ví dụ 4

Ở đây, chúng ta chỉ định màu nền cho tất cả các phần tử <p> có chỉ số là bội số của 3. Sau đó chúng ta trừ đi 1 (sẽ chọn phần tử thứ hai, thứ năm, thứ tám, v.v.):

p:nth-of-type(3n-1) {
  background: red;
}

Thử ngay

Ngữ pháp CSS

:nth-of-type(index | lẻ | chẵn | an+b) {
  các biểu thức css;
}

Chi tiết kỹ thuật

Hỗ trợ trình duyệt

Số trong bảng chỉ ra phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ pseudo-class.