nth-child trong CSS

nth-child trong CSS

Rate this post

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:

Tóm tắt nội dung

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

  1. 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.

  1. 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.

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.

: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.

Leave a Reply