Hướng dẫn how do you target the last two child in css? - làm thế nào để bạn nhắm mục tiêu hai đứa trẻ cuối cùng trong css?

165

Mới! Lưu câu hỏi hoặc câu trả lời và sắp xếp nội dung yêu thích của bạn. Tìm hiểu thêm.
Learn more.

Sử dụng một danh sách tiêu chuẩn, tôi đang cố chọn 2 mục danh sách cuối cùng. Tôi đã có nhiều hoán vị khác nhau của An+B nhưng dường như không có gì để chọn 2 cuối cùng:

li:nth-child(n+2) {} /* selects from the second onwards */
li:nth-child(n-2) {} /* selects everything */
li:nth-child(-n+2) {} /* selects first two only */
li:nth-child(-n-2) {} /* selects nothing */

Tôi nhận thức được một bộ chọn CSS3 mới như :nth-last-child() nhưng tôi thích thứ gì đó hoạt động trong một vài trình duyệt hơn nếu có thể (đặc biệt không quan tâm đến IE).

Hướng dẫn how do you target the last two child in css? - làm thế nào để bạn nhắm mục tiêu hai đứa trẻ cuối cùng trong css?

Boltclock

677K156 Huy hiệu vàng1362 Huy hiệu bạc1335 Huy hiệu Đồng156 gold badges1362 silver badges1335 bronze badges

Hỏi ngày 30 tháng 1 năm 2011 lúc 17:50Jan 30, 2011 at 17:50

DisguntledGoatDisgruntleDgoatDisgruntledGoat

67.7K67 Huy hiệu vàng204 Huy hiệu bạc285 Huy hiệu Đồng67 gold badges204 silver badges285 bronze badges

3

Điều này sẽ chọn hai IEM cuối cùng của danh sách:

li:nth-last-child(-n+2) {color:red;}
  • fred
  • fred
  • fred
  • fred
  • fred
  • fred
  • fred
  • fred

vsync

109K54 Huy hiệu vàng287 Huy hiệu bạc372 Huy hiệu đồng54 gold badges287 silver badges372 bronze badges

Đã trả lời ngày 30 tháng 6 năm 2011 lúc 23:29Jun 30, 2011 at 23:29

3

nth-last-child có vẻ như nó được thiết kế đặc biệt để giải quyết vấn đề này, vì vậy tôi nghi ngờ liệu có một sự thay thế tương thích hơn hay không. Hỗ trợ trông khá tốt, mặc dù.

Đã trả lời ngày 30 tháng 1 năm 2011 lúc 17:55Jan 30, 2011 at 17:55

Hướng dẫn how do you target the last two child in css? - làm thế nào để bạn nhắm mục tiêu hai đứa trẻ cuối cùng trong css?

PekkapekkaPekka

435K137 Huy hiệu vàng966 Huy hiệu bạc1080 Huy hiệu Đồng137 gold badges966 silver badges1080 bronze badges

1

:nth-last-child(-n+2) nên thực hiện thủ thuật

Đã trả lời ngày 16 tháng 7 năm 2012 lúc 15:27Jul 16, 2012 at 15:27

0

Do định nghĩa về ngữ nghĩa của nth-child, tôi không thấy làm thế nào điều này có thể mà không bao gồm độ dài của danh sách các yếu tố liên quan. Điểm của ngữ nghĩa là cho phép phân tách một loạt các yếu tố trẻ em thành các nhóm lặp lại (chỉnh sửa - cảm ơn Boltclock) hoặc vào phần đầu tiên của một số độ dài cố định, sau đó là "phần còn lại". Bạn sắp xếp muốn điều ngược lại với điều đó, đó là những gì nth-last-child cung cấp cho bạn.

Boltclock

677K156 Huy hiệu vàng1362 Huy hiệu bạc1335 Huy hiệu Đồng156 gold badges1362 silver badges1335 bronze badges

Hỏi ngày 30 tháng 1 năm 2011 lúc 17:50Jan 30, 2011 at 17:57

DisguntledGoatDisgruntleDgoatPointy

67.7K67 Huy hiệu vàng204 Huy hiệu bạc285 Huy hiệu Đồng59 gold badges575 silver badges607 bronze badges

2

Điều này sẽ chọn hai IEM cuối cùng của danh sách:

$('ul li:nth-last-child(1)').addClass('last');

vsync

109K54 Huy hiệu vàng287 Huy hiệu bạc372 Huy hiệu đồngJan 30, 2011 at 18:02

0

Làm thế nào để bạn chọn hai yếu tố cuối cùng trong CSS?

Nth-child () là một người chọn giả rất tiện dụng, nhưng đôi khi bạn cần tiếp cận mọi thứ từ đầu kia, bắt đầu từ mục cuối cùng. Đó là nơi mà-Last-Child đến giải cứu. is a very handy pseudo-selector, but sometimes you need to approach things from the other end, starting from the last item. That's where nth-last-child comes to the rescue.

Làm cách nào để chọn đứa con đầu tiên và cuối cùng trong CSS?

Cách chọn một phần tử là con đầu tiên hoặc cuối cùng của cha mẹ.Lớp giả: Lớp giả đầu tiên có nghĩa là "nếu phần tử này là con đầu lòng của cha mẹ".: con cái cuối cùng có nghĩa là "nếu yếu tố này là con cuối cùng của cha mẹ".Lưu ý rằng chỉ tính các nút phần tử (thẻ HTML), các lớp giả này bỏ qua các nút văn bản.The :first-child pseudo class means "if this element is the first child of its parent". :last-child means "if this element is the last child of its parent". Note that only element nodes (HTML tags) count, these pseudo-classes ignore text nodes.

Làm thế nào để bạn nhắm mục tiêu phần tử cuối cùng trong CSS?

: Bộ chọn loại cuối cùng cho phép bạn nhắm mục tiêu vào sự xuất hiện cuối cùng của một phần tử trong thùng chứa của nó.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 nội dung cha mẹ và anh chị em.). allows you to target the last occurence of an element within its container. 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 content. ).

Làm cách nào để nhắm mục tiêu con tiếp theo của tôi trong CSS?

Bộ chọn: nth-child (n) phù hợp với mọi yếu tố là con thứ n của cha mẹ.n có thể là một số, một từ khóa (lẻ hoặc thậm chí) hoặc một công thức (như + b).Mẹo: Nhìn vào bộ chọn: nth-of-type () để chọn phần tử là con thứ n, cùng loại (tên thẻ), của cha mẹ của nó.. n can be a number, a keyword (odd or even), or a formula (like an + b). Tip: Look at the :nth-of-type() selector to select the element that is the nth child, of the same type (tag name), of its parent.