Hướng dẫn how do i select all nth child in css? - làm cách nào để chọn tất cả con thứ n trong css?

Question

Tôi nhận được một chút ham chơi khi tôi bắt gặp những cách sử dụng hoàn hảo cho

li:nth-child(n+6) {
    color: green;   
}

3 hoặc

li:nth-child(n+6) {
    color: green;   
}

4 (đọc về sự khác biệt). Bạn càng hiểu chúng tốt hơn, CSS Nerdgasms càng có nhiều hơn!

Nội dung chính Show

Chỉ chọn phần tử thứ năm
Chọn tất cả trừ năm đầu tiên
Chỉ chọn năm đầu tiên
Chọn mỗi thứ tư, bắt đầu từ lần đầu tiên
Chỉ chọn lẻ hoặc thậm chí
Chọn phần tử cuối cùng
Chọn phần tử thứ hai đến cuối cùng
Muốn chơi?
Hỗ trợ trình duyệt
: nth-con (an + b của)
Điểm quan tâm
Các nguồn lực khác
Hỗ trợ trình duyệt
Làm cách nào để chọn tất cả các lớp trẻ em trong CSS?
Bộ chọn con thứ n () được sử dụng để làm gì?
Làm cách nào để chọn một đứa trẻ trong CSS?
Làm cách nào để chọn tất cả 3 yếu tố trong CSS?

Trong các công thức nấu ăn đơn giản này (thực sự: các biểu thức) Tôi sẽ tự tùy ý sử dụng danh sách các mục danh sách và số được chọn ngẫu nhiên. Nhưng nó nên khá rõ ràng làm thế nào để thay đổi chúng để có được các lựa chọn tương tự.

Chỉ chọn phần tử thứ năm

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

Để chọn phần tử đầu tiên, bạn có thể sử dụng: con đầu tiên hoặc tôi cá là bạn có thể đoán làm thế nào để thay đổi phần trên để làm điều đó.

Chọn tất cả trừ năm đầu tiên

li:nth-child(n+6) {
    color: green;   
}

Nếu có hơn 10 yếu tố ở đây, nó sẽ chọn tất cả chúng ngoài 5.

Chỉ chọn năm đầu tiên

li:nth-child(-n+5) {
    color: green;   
}

Chọn mỗi thứ tư, bắt đầu từ lần đầu tiên

li:nth-child(4n-7) {  /* or 4n+1 */
    color: green;   
}

Chỉ chọn lẻ hoặc thậm chí

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

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

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

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

li:last-child {
    color: green;
}

Chọn thứ 10 vì chúng tôi có 10 yếu tố ở đây, nhưng nếu có 8, nó sẽ chọn thứ 8, hoặc nếu có 1.290 thì nó sẽ chọn số 1.290.

Chọn phần tử thứ hai đến cuối cùng

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

Chọn thứ 9 vì chúng tôi có 10 yếu tố ở đây, nhưng nếu có 30 yếu tố thì nó sẽ chọn thứ 29.

Muốn chơi?

Hãy thử người kiểm tra.

Hỗ trợ trình duyệt

Thật thú vị,

li:nth-child(n+6) {
    color: green;   
}

5 đã được IE 7 hỗ trợ, nhưng nó không phải cho đến khi IE 9, nơi phần còn lại của công cụ này được hỗ trợ. Khác với IE có nhiều mối quan tâm hỗ trợ trình duyệt và nếu bạn lo lắng về IE, thì hãy sử dụng selectivizr. Nếu công cụ hỗ trợ trình duyệt rất thú vị hoặc quan trọng đối với bạn, chắc chắn hãy xem khi nào tôi có thể sử dụng trên mạng mà theo dõi công cụ này rất tốt.

Bộ chọn

li:nth-child(n+6) {
    color: green;   
}

3 cho phép bạn chọn một hoặc nhiều phần tử dựa trên thứ tự nguồn của chúng, theo một công thức.

/* Select the first list item */
li:nth-child(1) { }

/* Select the 5th list item */
li:nth-child(5) { }

/* Select every other list item starting with first */
li:nth-child(odd) { }

/* Select every 3rd list item starting with first */
li:nth-child(3n - 2) { }

/* Select every 3rd list item starting with 2nd */
li:nth-child(3n - 1) { }

/* Select every 3rd child item, as long as it has class "el" */
.el:nth-child(3n) { }

Nó được định nghĩa trong các bộ chọn CSS Cấp độ 3 là một lớp giả cấu trúc của lớp, có nghĩa là nó được sử dụng để tạo kiểu nội dung dựa trên mối quan hệ của nó với các yếu tố cha mẹ và anh chị em.

Giả sử chúng ta đang xây dựng lưới CSS và muốn loại bỏ lề trên mỗi mô -đun lưới thứ tư. Ở đây, đó là HTML:

<section class="grid">
  <article class="module">One</article>
  <article class="module">Two</article>
  <article class="module">Three</article>
  <article class="module">Four</article>
  <article class="module">Five</article>
</section>

Thay vì thêm một lớp vào mỗi mục thứ tư (ví dụ:

li:nth-child(n+6) {
    color: green;   
}

7), chúng ta có thể sử dụng

li:nth-child(n+6) {
    color: green;   
}

3:

li:nth-child(n+6) {
    color: green;   
}

0

Bộ chọn

li:nth-child(n+6) {
    color: green;   
}

3 có một đối số: Đây có thể là một số nguyên duy nhất, từ khóa

li:nth-child(-n+5) {
    color: green;   
}

0,

li:nth-child(-n+5) {
    color: green;   
}

1 hoặc một công thức. Nếu một số nguyên được chỉ định, chỉ có một phần tử được chọn, nhưng các từ khóa hoặc công thức sẽ lặp lại thông qua tất cả con cái của phần tử cha và chọn các phần tử phù hợp - tương tự như điều hướng các mục trong mảng JavaScript. Các từ khóa, ngay cả những người khác và lẻ lẻ rất đơn giản (2, 4, 6, v.v. hoặc 1, 3, 5 tương ứng). Công thức được xây dựng bằng cú pháp

li:nth-child(-n+5) {
    color: green;   
}

2, trong đó:

"A" là một giá trị số nguyên
“N” là chữ cái nghĩa đen
Một người khác là một nhà điều hành và có thể là một người khác
"B" là một số nguyên và được yêu cầu nếu một toán tử được đưa vào công thức

Điều quan trọng cần lưu ý là công thức này là một phương trình và lặp lại thông qua từng phần tử anh chị em, xác định sẽ được chọn. Phần N N của công thức, nếu được bao gồm, đại diện cho một tập hợp các số nguyên dương tăng (giống như lặp lại thông qua một mảng). Trong ví dụ trên của chúng tôi, chúng tôi đã chọn từng phần tử thứ tư với công thức

li:nth-child(-n+5) {
    color: green;   
}

3, hoạt động vì mỗi khi một phần tử được kiểm tra, thì N N N N N N N N N N N N N N N N N N N N. . Nếu một phần tử phần tử phù hợp với kết quả của phương trình, nó sẽ được chọn (4, 8, 12, v.v.). Để giải thích sâu hơn về toán học liên quan, xin vui lòng đọc bài viết này.

Để minh họa thêm, đây là một số ví dụ về bộ chọn

li:nth-child(n+6) {
    color: green;   
}

3 hợp lệ:

May mắn thay, bạn không phải lúc nào cũng phải tự mình làm toán, có một số người kiểm tra và máy phát điện

li:nth-child(n+6) {
    color: green;   
}

3 ngoài kia:

CSS-Tricks Tester
Người kiểm tra Lea Verou từ

: nth-con (an + b của)

Có một bộ lọc ít được biết đến có thể được thêm vào

li:nth-child(n+6) {
    color: green;   
}

3 theo thông số kỹ thuật của Bộ chọn CSS: Khả năng chọn

li:nth-child(n+6) {
    color: green;   
}

3 của một tập hợp con của các phần tử, sử dụng định dạng

li:nth-child(-n+5) {
    color: green;   
}

8. Giả sử bạn có một danh sách các nội dung hỗn hợp: một số có lớp

li:nth-child(-n+5) {
    color: green;   
}

9, một số có lớp

li:nth-child(4n-7) {  /* or 4n+1 */
    color: green;   
}

0 và bạn muốn chọn 3 hình ảnh đầu tiên. Bạn có thể làm như vậy với bộ lọc của người Viking như vậy:

li:nth-child(n+6) {
    color: green;   
}

1

Lưu ý rằng điều này khác với việc nối trực tiếp bộ chọn trực tiếp vào bộ chọn

li:nth-child(n+6) {
    color: green;   
}

3:

li:nth-child(n+6) {
    color: green;   
}

2

Điều này có thể có một chút khó hiểu, vì vậy một ví dụ có thể giúp minh họa sự khác biệt:

Hỗ trợ trình duyệt cho bộ lọc của OF OF rất hạn chế: khi viết bài này, chỉ có Safari hỗ trợ cú pháp. Để kiểm tra trạng thái của trình duyệt yêu thích của bạn, đây là các vấn đề mở liên quan đến

li:nth-child(4n-7) {  /* or 4n+1 */
    color: green;   
}

2:

Firefox: Hỗ trợ cho nth-child (an+b của sel)
Chrome: Thực hiện: Nth-con (A+B của S)

Điểm quan tâm

```
li:nth-child(n+6) {
    color: green;   
}
```
3 lặp lại thông qua các phần tử bắt đầu từ đầu đơn đặt hàng. Sự khác biệt duy nhất giữa nó và
```
li:nth-child(4n-7) {  /* or 4n+1 */
    color: green;   
}
```
4 là phần sau lặp lại thông qua các phần tử bắt đầu từ dưới cùng của thứ tự nguồn.
Cú pháp để chọn số phần tử
```
li:nth-child(4n-7) {  /* or 4n+1 */
    color: green;   
}
```
5 đầu tiên là một chút phản trực giác. Bạn bắt đầu với
```
li:nth-child(4n-7) {  /* or 4n+1 */
    color: green;   
}
```
6, cộng với số lượng các yếu tố dương bạn muốn chọn. Ví dụ:
```
li:nth-child(4n-7) {  /* or 4n+1 */
    color: green;   
}
```
7 sẽ chọn 3 yếu tố
```
li:nth-child(4n-7) {  /* or 4n+1 */
    color: green;   
}
```
8 đầu tiên.
Bộ chọn
```
li:nth-child(n+6) {
    color: green;   
}
```
3 rất giống với
```
li:nth-child(n+6) {
    color: green;   
}
```
4 nhưng với một sự khác biệt quan trọng: nó ít cụ thể hơn. Trong ví dụ của chúng tôi ở trên, họ sẽ tạo ra kết quả tương tự vì chúng tôi chỉ lặp lại các yếu tố
```
li:nth-child(odd) {
    color: green;   
}
```
1, nhưng nếu chúng tôi lặp đi lặp lại một nhóm anh chị em phức tạp hơn,
```
li:nth-child(n+6) {
    color: green;   
}
```
3 sẽ cố gắng khớp với tất cả anh chị em, không chỉ anh chị em cùng loại. Điều này cho thấy sức mạnh của ____ 13, nó có thể chọn bất kỳ yếu tố anh chị em nào trong một sự sắp xếp, không chỉ các yếu tố được chỉ định trước đại tràng.critical difference: it is less specific. In our example above they would produce the same result because we are iterating over only
```
li:nth-child(odd) {
    color: green;   
}
```
1 elements, but if we were iterating over a more complex group of siblings,
```
li:nth-child(n+6) {
    color: green;   
}
```
3 would try to match all siblings, not only siblings of the same element type. This reveals the power of
```
li:nth-child(n+6) {
    color: green;   
}
```
3—it can select any sibling element in an arrangement, not only elements that are specified before the colon.

nth-last-child
nth-of-type
nth-last-of-type
first-of-type
last-of-type

Các nguồn lực khác

Hữu ích: Công thức nấu ăn thứ n-con
Tài liệu Mozilla
Bài viết QuirksMode
Bài viết của trang web

Hỗ trợ trình duyệt

Trình duyệt Chrome	Cuộc đi săn	Firefox	Opera	I E	Android	iOS
Không tí nào	3.2+	Không tí nào	3.2+	9,5+	Không tí nào	Không tí nào

3.2+

Làm cách nào để chọn tất cả các lớp trẻ em trong CSS?

Chọn tất cả các yếu tố trẻ em. Phần tử> Phần tử ..

Nếu các phần tử con chọn đệ quy thì hãy sử dụng cú pháp sau. Div.Class> * {// Thuộc tính CSS}.

Bộ chọn con thứ n () được sử dụng để làm gì?

Bộ chọn: NTH-con cho phép bạn chọn một hoặc nhiều phần tử dựa trên thứ tự nguồn của chúng, theo một công thức.Nó được định nghĩa trong các bộ chọn CSS Cấp độ 3 là một lớp giả cấu trúc của lớp, có nghĩa là nó được sử dụng để tạo kiểu nội dung dựa trên mối quan hệ của nó với các yếu tố cha mẹ và anh chị em.allows you to select one or more elements based on their source order, according to a formula. It is defined in the CSS Selectors Level 3 spec as a “structural pseudo-class”, meaning it is used to style content based on its relationship with parent and sibling elements.

Làm cách nào để chọn một đứa trẻ trong CSS?

Bộ kết hợp trẻ em (>) được đặt giữa hai bộ chọn CSS.Nó chỉ phù hợp với các yếu tố phù hợp với bộ chọn thứ hai là trẻ em trực tiếp của các yếu tố phù hợp với thứ nhất.Các yếu tố phù hợp với bộ chọn thứ hai phải là trẻ em ngay lập tức của các yếu tố phù hợp với bộ chọn đầu tiên.. It matches only those elements matched by the second selector that are the direct children of elements matched by the first. Elements matched by the second selector must be the immediate children of the elements matched by the first selector.

Làm cách nào để chọn tất cả 3 yếu tố trong CSS?

Công thức (an + b) Ngoài giá trị n có thể là bất kỳ số nào, bạn cũng có thể sử dụng một công thức.Nth-child (3n) sẽ ảnh hưởng đến mọi yếu tố trẻ em thứ ba.Nth-child (3n+1) sẽ áp dụng cho mỗi phần tử thứ ba bắt đầu từ phần đầu tiên.nth-child(3n) would affect every third child element. nth-child(3n+1) would apply to every third element starting from the first one.