Lớp giả định CSS :nth-last-of-type()

Định nghĩa và cách sử dụng

CSS :nth-last-of-type(n) Lớp giả định để khớp với phần tử con là phần tử con倒数 thứ n mỗi phần tử.

n Có thể là một số/ 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-last-child() Lớp giả định để chọn phần tử con là phần tử con倒数 thứ n mỗi phần tử con của phần tử, bất kể loại của nó.

Mẫu

Ví dụ 1

Chỉ định màu nền cho các thẻ <p> là phần tử con倒数 thứ hai của thẻ <p> cha.

Đồng thời, chỉ định màu nền cho các thẻ <li> là phần tử con倒数 thứ ba của thẻ <li> cha:

p:nth-last-of-type(2) {
  background: red;
}
li:nth-last-of-type(3) {
background: yellow;
}

Thử ngay

Ví dụ 2

lẻ và chẵn Là từ khóa, có thể sử dụng để khớp với 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).

Tại đây, chúng ta sẽ chỉ định màu nền khác nhau cho các thẻ <p> có chỉ số lẻ và chẵn:

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

Thử ngay

Ví dụ 3

Sử dụng công thức (an + b). Mô tả: a là bước số nguyên, n là tất cả các số nguyên không âm bắt đầu từ 0, b là số nguyên dịch chuyển.

Tại đây, chúng ta sẽ chỉ định màu nền cho tất cả các thẻ <p> và <li> có chỉ số đếm ngược là múi 3:

p:nth-last-of-type(3n) {
  background: red;
}
li:nth-last-of-type(3n) {
  background: yellow;
}

Thử ngay

Cú pháp CSS

:nth-last-of-type(index || lẻ | chẵn | an+b) {
  các khai báo 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ợ lớp giả định này hoàn toàn.