CSS : Bộ chọn thứ n-of-type ()
Thí dụ
Chỉ định màu nền cho mọi phần tử <p> là phần tử p thứ hai của phần tử cha của nó:
p:nth-of-type(2)
{
background: red;
}
Thêm các ví dụ "Hãy tự mình thử" bên dưới.
Định nghĩa và Cách sử dụng
Bộ chọn khớp với mọi phần tử là phần tử con thứ n , của một kiểu cụ thể, của phần tử cha của nó.:nth-of-type(n)
n có thể là một số, một từ khóa hoặc một công thức.
Mẹo: Nhìn vào bộ chọn : nth-child () để chọn phần tử là phần tử con thứ n , bất kể loại , của phần tử cha của nó.
Phiên bản: | CSS3 |
---|
Hỗ trợ trình duyệt
Các số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ bộ chọn.
Selector | |||||
---|---|---|---|---|---|
:nth-of-type() | 4.0 | 9.0 | 3.5 | 3.2 | 9.6 |
Cú pháp CSS
:nth-of-type(number) {
css declarations;
}
Các ví dụ khác
Thí dụ
Lẻ và chẵn là những từ khóa có thể được sử dụng để so khớp các phần tử con có chỉ số là lẻ hoặc chẵn (chỉ số của phần tử con đầu tiên là 1).
Ở đây, chúng tôi chỉ định hai màu nền khác nhau cho các phần tử p chẵn và lẻ:
p:nth-of-type(odd)
{
background: red;
}
p:nth-of-type(even)
{
background: blue;
}
Thí dụ
Sử dụng công thức ( an + b ). Mô tả: a đại diện cho kích thước chu kỳ, n là bộ đếm (bắt đầu từ 0) và b là giá trị bù.
Ở đây, chúng tôi 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:
p:nth-of-type(3n+0)
{
background: red;
}