Chọn mọi phần tử thứ N trong CSS

242

Có thể chọn, giả sử, mọi phần tử thứ tư trong một tập hợp các phần tử không?

Vd: Tôi có 16 <div>yếu tố ... Tôi có thể viết một cái gì đó như.

div:nth-child(4),
div:nth-child(8),
div:nth-child(12),
div:nth-child(16)

Có cách nào tốt hơn để làm điều này?

css css-selectors

— Derek Adair
nguồn

1

Hy vọng tất cả mọi người vẫn còn sống, chỉ dành cho người mới và không phải người mới, thậm chí chọn một số lượng mọi yếu tố n và nhiều thứ khó khăn hơn: nthmaster.com

— báo cáo

419

Như tên ngụ ý, cho phép bạn xây dựng một biểu thức số học bằng cách sử dụng biến ngoài số không đổi. Bạn có thể thực hiện phép cộng ( ), phép trừ ( ) và phép nhân hệ số ( trong đó là một số nguyên, bao gồm số dương, số âm và số không).:nth-child()n+-ana

Đây là cách bạn sẽ viết lại danh sách bộ chọn ở trên:

div:nth-child(4n)

Để biết giải thích về cách các biểu thức số học này hoạt động, hãy xem câu trả lời của tôi cho câu hỏi này , cũng như thông số kỹ thuật .

Lưu ý rằng câu trả lời này giả định rằng tất cả các phần tử con trong cùng một phần tử cha là cùng loại phần tử , div. Nếu bạn có bất kỳ yếu tố khác của các loại khác nhau như: h1hay p, bạn sẽ cần phải sử dụng :nth-of-type()thay vì :nth-child()để đảm bảo bạn chỉ đếm divcác yếu tố:

<body>
  <h1></h1>
  <div>1</div>  <div>2</div>
  <div>3</div>  <div>4</div>
  <h2></h2>
  <div>5</div>  <div>6</div>
  <div>7</div>  <div>8</div>
  <h2></h2>
  <div>9</div>  <div>10</div>
  <div>11</div> <div>12</div>
  <h2></h2>
  <div>13</div> <div>14</div>
  <div>15</div> <div>16</div>
</body>

Đối với mọi thứ khác (các lớp, thuộc tính hoặc bất kỳ kết hợp nào trong số này), khi bạn đang tìm kiếm đứa con thứ n phù hợp với bộ chọn tùy ý, bạn sẽ không thể thực hiện điều này với bộ chọn CSS thuần. Xem câu trả lời của tôi cho câu hỏi này .

Nhân tiện, không có nhiều sự khác biệt giữa 4n và 4n + 4 liên quan đến :nth-child(). Nếu bạn sử dụng nbiến, nó bắt đầu đếm ở 0. Đây là giá trị của mỗi bộ chọn:

:nth-child(4n)

4(0) = 0
4(1) = 4
4(2) = 8
4(3) = 12
4(4) = 16
...

:nth-child(4n+4)

4(0) + 4 = 0  + 4 = 4
4(1) + 4 = 4  + 4 = 8
4(2) + 4 = 8  + 4 = 12
4(3) + 4 = 12 + 4 = 16
4(4) + 4 = 16 + 4 = 20
...

Như bạn có thể thấy, cả hai bộ chọn sẽ khớp với các yếu tố giống như trên. Trong trường hợp này, không có sự khác biệt.

— BoltClock
nguồn

Tôi chỉ nghĩ rằng tôi sẽ thêm, nếu bạn đang làm một cái gì đó như chỉ là thứ tư thì bạn sẽ cần một cái gì đó như tr td:nth-child(4). Lưu ý việc thiếu bất kỳ n nào trong ngoặc

— WORMSS

2

xin lưu ý: Điều này chỉ hoạt động trên các bộ chọn phần tử (div, td, img, v.v.), không hoạt động trên bộ chọn lớp như .this

— Sliq

1

Tôi đã tạo một bản demo tương tác để giải thích trực quan cách thức hoạt động của nth-child (n): xengravity.com/demo/nth-child . Tôi thấy thông số w3 đặc biệt gây khó chịu cho người mới bắt đầu sử dụng cú pháp nào; cụ thể là phần 'Máy quét từ điển' của họ.

— xengravity

1

@xengravity: Cảm ơn bạn đã chia sẻ! Tôi đồng ý, ngữ pháp không thân thiện với người mới bắt đầu vì nó được viết với những người thực hiện trong tâm trí và không phải là tác giả. Thông số kỹ thuật cung cấp một số ví dụ về cách viết cú pháp, nhưng không kèm theo hình ảnh.

— BoltClock

1

Tôi đã thực hiện công cụ tương tự để chơi với các biểu thức thứ n con: salman-w.googlecode.com/svn/trunk/css/...

— Salman Một

24

div:nth-child(4n+4)

Xem: http://css-tricks.com/how-nth-child-works/

— Tomalak
nguồn

12

Thử cái này

div:nth-child(4n+4)

— Đánh dấu
nguồn

10

Bạn cần đối số chính xác cho nth-childlớp giả.

Đối số phải ở dạng an + bđể khớp với mọi đứa trẻ ^thứ bắt đầu từ b.
Cả hai avà blà số nguyên tùy chọn và cả hai có thể bằng 0 hoặc âm.
- Nếu abằng 0 thì không có mệnh đề "every a ^th child" .
- Nếu alà âm thì khớp được thực hiện ngược bắt đầu từ b.
- Nếu bbằng 0 hoặc âm thì có thể viết biểu thức tương đương bằng cách sử dụng bví dụ dương 4n+0giống như 4n+4. Tương tự như vậy 4n-1là giống như 4n+3.

Ví dụ:

Chọn mỗi đứa trẻ thứ 4 (4, 8, 12, ...)

li:nth-child(4n) {
  background: yellow;
}

<ol>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
</ol>

Mở rộng đoạn trích

Chọn mỗi đứa trẻ thứ 4 bắt đầu từ 1 (1, 5, 9, ...)

Hiển thị đoạn mã

li:nth-child(4n+1) {
  background: yellow;
}

<ol>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
</ol>

Mở rộng đoạn trích

Chọn mọi đứa trẻ thứ 3 và thứ 4 trong các nhóm 4 (3 và 4, 7 và 8, 11 và 12, ...)

Hiển thị đoạn mã

/* two selectors are required */
li:nth-child(4n+3),
li:nth-child(4n+4) {
  background: yellow;
}

<ol>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
</ol>

Mở rộng đoạn trích

Chọn 4 mục đầu tiên (4, 3, 2, 1)

Hiển thị đoạn mã

/* when a is negative then matching is done backwards  */
li:nth-child(-n+4) {
  background: yellow;
}

<ol>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
</ol>

Mở rộng đoạn trích

— Salman A
nguồn