CSS: nth-child () CSS selector khớp với các phần tử dựa trên vị trí của chúng trong một nhóm anh chị em.
Các bài viết liên quan:
Cú pháp
: nth-child () nhận một đối số duy nhất mô tả một mẫu để khớp các chỉ số phần tử trong danh sách anh chị em. Chỉ số phần tử dựa trên 1.
Value
- odd
Đại diện cho các phần tử có vị trí số trong một chuỗi các phần tử là số lẻ: 1, 3, 5, v.v.
- even
Đại diện cho các phần tử có vị trí số trong một chuỗi các phần tử là số chẵn: 2, 4, 6, v.v.
Xem thêm Xu hướng thiết kế trang web hiện đại
Function
<An + B>
Đại diện cho các phần tử trong danh sách có các chỉ số khớp với các chỉ số được tìm thấy trong một mẫu số tùy chỉnh, được xác định bởi An + B, trong đó:
- A là kích thước bước số nguyên,
- B là một số nguyên bù,
- n là tất cả các số nguyên không âm, bắt đầu từ 0.
Nó có thể được đọc như là phần tử An + B của một danh sách.
Ví dụ:
tr:nth-child(odd) or tr:nth-child(2n+1)
Đại diện cho các hàng lẻ của bảng HTML: 1, 3, 5, v.v.
tr:nth-child(even) or tr:nth-child(2n)
Đại diện cho các hàng chẵn của bảng HTML: 2, 4, 6, v.v.
:nth-child(7)
Đại diện cho phần tử thứ bảy.
:nth-child(5n)
Đại diện cho các phần tử 5 [= 5 × 1], 10 [= 5 × 2], 15 [= 5 × 3], v.v. Phần tử đầu tiên được trả về do kết quả của công thức là 0 [= 5×0], kết quả là không trùng khớp, vì các phần tử được lập chỉ mục từ 1, trong khi n bắt đầu từ 0. Điều này thoạt đầu có vẻ kỳ lạ, nhưng sẽ có ý nghĩa hơn khi phần B của công thức> 0, như trong ví dụ tiếp theo.
Xem thêm Từ khách hàng đến đại sứ thương hiệu
:nth-child(n+7)
Đại diện cho phần tử thứ bảy và tất cả các phần tử sau: 7 [= 0 + 7], 8 [= 1 + 7], 9 [= 2 + 7], v.v.
:nth-child(3n+4)
Đại diện cho các phần tử 4 [= (3 × 0) +4], 7 [= (3 × 1) +4], 10 [= (3 × 2) +4], 13 [= (3 × 3) +4], Vân vân.
:nth-child(-n+3)
Đại diện cho ba yếu tố đầu tiên. [= -0 + 3, -1 + 3, -2 + 3]
p:nth-child(n)
Đại diện cho mọi phần tử <p> trong một nhóm anh chị em. Điều này chọn các phần tử giống như một bộ chọn p đơn giản (mặc dù có độ đặc hiệu cao hơn).
p:nth-child(1) or p:nth-child(0n+1)
Đại diện cho mọi <p> là phần tử đầu tiên trong một nhóm anh chị em. Điều này giống với: bộ chọn con đầu tiên (và có cùng độ đặc hiệu).
p:nth-child(n+8):nth-child(-n+15)
Đại diện cho phần tử thứ tám đến mười lăm phần tử <p> của một nhóm anh chị em.
Ví dụ về :nth-child
See the Pen CSS-Tricks: :nth-child by Zachary Kain (@zakkain) on CodePen.
Xem thêm Dịch vụ tối ưu UX,UI
Một số câu hỏi phổ biến về nth-child trong CSS
- nth-child là gì trong CSS? nth-child là một pseudoclass trong CSS, nó được sử dụng để chọn phần tử con thứ n trong phần tử cha của nó. Nó cũng có thể được sử dụng để chọn phần tử con của một loại cụ thể trong phần tử cha.
- Cú pháp của nth-child là gì? nth-child được viết dưới dạng :nth-child(an+b), trong đó a và b là các số nguyên không âm. Ví dụ:
- :nth-child(2) chọn phần tử con thứ hai của phần tử cha.
- :nth-child(odd) chọn tất cả các phần tử con lẻ của phần tử cha.
- :nth-child(even) chọn tất cả các phần tử con chẵn của phần tử cha.
- nth-child(n) và nth-of-type(n) khác nhau như thế nào? nth-child(n) chọn tất cả các phần tử con của phần tử cha theo vị trí của chúng. Tuy nhiên, nth-of-type(n) chỉ chọn các phần tử con của phần tử cha theo loại của chúng. Ví dụ: nth-child(3) sẽ chọn phần tử con thứ ba bất kỳ loại phần tử con nào, trong khi nth-of-type(3) chỉ chọn phần tử con thứ ba cùng loại với phần tử cha.
- Nth-child có thể được sử dụng để thực hiện những gì? Nth-child có thể được sử dụng để:
- Chọn tất cả các phần tử con của một phần tử cha.
- Chọn các phần tử con theo vị trí của chúng trong phần tử cha.
- Chọn các phần tử con theo kiểu của chúng trong phần tử cha.
- Chọn các phần tử con với một số kết hợp các giá trị a và b.
- Nth-child có hỗ trợ cho tất cả các trình duyệt không? Nth-child được hỗ trợ trên tất cả các trình duyệt hiện đại, bao gồm cả Internet Explorer 9 trở lên. Tuy nhiên, các phiên bản trình duyệt cũ hơn có thể không hỗ trợ pseudoclass này.
- Làm thế nào để sử dụng nth-child để chọn phần tử con? Để sử dụng nth-child để chọn phần tử con, bạn cần chỉ định các giá trị a và b vào trong pseudoclass. Ví dụ:
- Chọn tất cả các phần tử con thứ ba trong phần tử cha:
:nth-child(3) - Chọn tất cả các phần tử con thứ chẵn trong phần tử cha:
:nth-child(even) - Chọn tất cả các phần tử con thứ lẻ trong phần tử cha:
:nth-child(odd) - Chọn tất cả các phần tử con thứ 2, 3, 4, 5, 6 trong phần tử cha:
:nth-child(n+2):nth-child(-n+6)
- Làm thế nào để sử dụng nth-child để chọn phần tử con theo loại của chúng? Để sử dụng nth-child để chọn phần tử con theo loại của chúng, bạn cần sử dụng nth-of-type pseudoclass. Ví dụ:
- Chọn tất cả các phần tử con thứ ba của loại div trong phần tử cha:
div:nth-of-type(3) - Chọn tất cả các phần tử con thứ lẻ của loại p trong phần tử cha:
p:nth-of-type(odd) - Chọn tất cả các phần tử con thứ chẵn của loại ul trong phần tử cha:
ul:nth-of-type(even)
- Làm thế nào để sử dụng nth-child để chọn phần tử con theo các giá trị kết hợp a và b? Để sử dụng nth-child để chọn phần tử con theo các giá trị kết hợp a và b, bạn cần sử dụng công thức an+b trong pseudoclass. Ví dụ:
- Chọn tất cả các phần tử con thứ 4, 7, 10, 13, 16, … trong phần tử cha:
:nth-child(3n+1) - Chọn tất cả các phần tử con thứ 3, 5, 7, 9, 11, … trong phần tử cha:
:nth-child(2n+1) - Chọn tất cả các phần tử con thứ 2, 5, 8, 11, 14, … trong phần tử cha:
:nth-child(3n-1)
- Có thể sử dụng nth-child để chọn phần tử con dựa trên trạng thái của chúng không? Không, bạn không thể sử dụng nth-child để chọn phần tử con dựa trên trạng thái của chúng, ví dụ như khi chúng được checked hay focus. Để chọn phần tử con dựa trên trạng thái của chúng, bạn cần sử dụng pseudoclass khác như :checked hoặc :focus.
- Có bao nhiêu giá trị có thể được sử dụng trong pseudoclass nth-child? Bạn có thể sử dụng bất kỳ giá trị nguyên dương nào trong pseudoclass nth-child, bao gồm 1, 2, 3, 4, 5, … Ngoài ra, bạn cũng có thể sử dụng từ khóa even và odd để chọn các phần tử con thứ chẵn hoặc lẻ.
- Có thể sử dụng nth-child để chọn tất cả các phần tử con trừ phần tử con đầu tiên hoặc cuối cùng không? Có, bạn có thể sử dụng nth-child để chọn tất cả các phần tử con trừ phần tử con đầu tiên hoặc cuối cùng bằng cách sử dụng pseudoclass :not và kết hợp với nth-child. Ví dụ:
- Chọn tất cả các phần tử con trừ phần tử con đầu tiên của phần tử cha:
:not(:first-child) - Chọn tất cả các phần tử con trừ phần tử con cuối cùng của phần tử cha:
:not(:last-child)
