Chỉ chọn css con thứ hai

Một điều thú vị mà chúng ta có thể làm với bộ chọn con thứ n là chọn mọi phần tử x. Vì vậy, giả sử, chẳng hạn chúng ta muốn mọi phần tử thứ tư

li:nth-child(4n) {
  color: purple;
}

Bây giờ mọi phần tử con thứ 4 được chọn

Hoặc nếu chúng tôi muốn bao gồm mục đầu tiên

li:nth-child(4n + 1) {
  color: purple;
}

Kết quả

Ví dụ, chúng ta cũng có thể bắt đầu từ phần tử thứ hai

li:nth-child(4n + 2) {
  color: purple;
}

Kết quả

Chọn mọi mục trừ x mục đầu tiên permalink

Chúng tôi thậm chí có thể sử dụng bộ chọn để chọn mọi thẻ trừ ba phần tử đầu tiên

li:nth-child(n + 4) {
  color: teal;
}

Kết quả

Chọn x số phần tử đầu tiên permalink

Một điều thú vị khác mà chúng ta có thể làm là chỉ chọn số lượng x đầu tiên. Hãy lấy ba mục đầu tiên

li:nth-child(-n + 3) {
  color: teal;
}

Kết quả

Chọn phần tử cuối cùng permalink

Chúng ta thậm chí có thể chọn phần tử cuối cùng

li:last-child {
  color: orange;
}

Kết quả

Chúng tôi cũng có thể bù đắp để có được mục danh sách thứ hai đến cuối cùng

li:nth-child(3) {
  color: green;
}

Kết quả

Bộ chọn kết hợp liên kết cố định

Chúng ta cũng có thể kết hợp các bộ chọn con thứ n

Giả sử bạn muốn lấy mọi số chẵn từ một số lượng trong danh sách lẻ

li:nth-child(3) {
  color: green;
}

li:nth-child(3) {
  color: green;
}

Điều này sẽ nhận được tất cả các thẻ

li:nth-child(3) {
  color: green;
}

li:nth-child(3) {
  color: green;
}

Kết quả

Xem tất cả các ví dụ trong Codepen này để dùng thử permalink

Chơi thử với Codepen này. Hãy thử và thay đổi một số bộ chọn để xem điều gì sẽ xảy ra

Xem thông tin cơ bản về bộ chọn con thứ n CSS của Chris Bongers (@rebelchris) trên CodePen

Hỗ trợ trình duyệt cho bộ chọn con thứ n permalink

Bộ chọn con thứ n có hỗ trợ tuyệt vời và có thể được sử dụng trong hầu hết các trình duyệt. Đừng ngần ngại sử dụng chúng

Cảm ơn bạn đã đọc và hãy kết nối. liên kết cố định

Cảm ơn bạn đã đọc blog của tôi. Vui lòng đăng ký nhận bản tin email của tôi và kết nối trên Facebook hoặc Twitter

mục lục. Chỉ số của từng đứa trẻ để khớp, bắt đầu bằng

li:nth-child(4n + 2) {
  color: purple;
}

li:nth-child(4n + 2) {
  color: purple;
}

li:nth-child(4n + 2) {
  color: purple;
}

li:nth-child(4n + 2) {
  color: purple;
}

li:nth-child(4n + 2) {
  color: purple;
}

Vì việc triển khai bộ chọn

li:nth-child(4n + 2) {
  color: purple;
}

li:nth-child(4n + 2) {
  color: purple;
}

li:nth-child(4n + 2) {
  color: purple;
}

li:nth-child(4n + 1) {
  color: purple;
}

li:nth-child(4n + 1) {
  color: purple;
}

li:nth-child(4n + 1) {
  color: purple;
}

li:nth-child(4n + 1) {
  color: purple;
}

li:nth-child(4n + 1) {
  color: purple;
}

li:nth-child(4n + 1) {
  color: purple;
}

Lớp giả

li:nth-child(4n + 1) {
  color: purple;
}

li:nth-child(4n + 1) {
  color: purple;
}

li:nth-child(4n + 1) {
  color: purple;
}

li:nth-child(4n + 1) {
  color: purple;
}

Thảo luận thêm về cách sử dụng bất thường này có thể được tìm thấy trong đặc tả CSS của W3C

li:nth-child(4n + 2) {
  color: purple;
}

li:nth-child(4n + 2) {
  color: purple;
}

li:nth-child(4n + 2) {
  color: purple;
}