Hướng dẫn how do you select the last two elements in css? - làm thế nào để bạn chọn hai phần tử cuối cùng trong css?

Có thể không? Nếu không, có cách nào để làm điều đó với jQuery không?

Boltclock

678K156 Huy hiệu vàng1364 Huy hiệu bạc1336 Huy hiệu đồng156 gold badges1364 silver badges1336 bronze badges

Đã hỏi ngày 7 tháng 7 năm 2011 lúc 1:32Jul 7, 2011 at 1:32

2

Nó có thể với CSS3. Xem xét đánh dấu:

    
First item
    
Second item
    
Test
    
Test
    
Pre-last item
    
Last item

Để chọn hai yếu tố LI cuối cùng bạn làm:

ul > li:nth-last-of-type(-n+2) {
    background: green;
}

Hoạt động trong tất cả các trình duyệt đương đại bao gồm IE9, nhưng không bao gồm IE8 trở xuống. Để thêm hỗ trợ cho các trình duyệt đó, bạn có thể xem xét sử dụng selectivizr.js

Đã trả lời ngày 7 tháng 7 năm 2011 lúc 8:09Jul 7, 2011 at 8:09

Spliterspliterspliter

11.9k4 Huy hiệu vàng31 Huy hiệu bạc36 Huy hiệu đồng4 gold badges31 silver badges36 bronze badges

5

:last-child,
:nth-last-child(2) {
  ruleset
}

cũng sẽ chơi.

Đã trả lời ngày 23 tháng 4 năm 2013 lúc 8:46Apr 23, 2013 at 8:46

Katsampukatsampukatsampu

3653 Huy hiệu bạc3 Huy hiệu Đồng3 silver badges3 bronze badges

1

Đối với tôi đó là điều này: li:not(:nth-last-child(-n+2))

Đã trả lời ngày 13 tháng 6 năm 2019 lúc 8:17Jun 13, 2019 at 8:17

0

Thật không may là không thể .. coi thường câu trả lời này và nhìn vào câu trả lời của các bộ tách bên dưới.

Nếu nó là có thể, nó sẽ trông giống như ...

ul li:last-child+li {...}

Nhưng điều này không hoạt động, bởi vì + sẽ chọn anh chị em ngay sau khi con cái cuối cùng (tất nhiên là không có gì). Không có bộ chọn trước đó ngay lập tức.

Có nhiều cách khác nhau để đạt được điều này với jQuery, người thực hiện nhiều nhất sẽ là ...

var lastItems = $("#list li");
lastItems.slice(lastItems.length - 2).addClass("whatever");

http://jsfiddle.net/qkzdJ/

Martijn

15,5K4 Huy hiệu vàng36 Huy hiệu bạc66 Huy hiệu Đồng4 gold badges36 silver badges66 bronze badges

Đã trả lời ngày 7 tháng 7 năm 2011 lúc 2:24Jul 7, 2011 at 2:24

Phương phápOfactionMethodofActionmethodofaction

69.2K21 Huy hiệu vàng147 Huy hiệu bạc163 Huy hiệu đồng21 gold badges147 silver badges163 bronze badges

3

Bạn bắt đầu với -N, 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 (-n+2) sẽ chọn 2 phần tử Li đầu tiên.

Làm thế nào để bạn chọn tất cả trừ phần tử cuối cùng trong CSS?

  
First Item
  
Second Item
  
Third Item
  
Fourth Item
  
Fifth Item

Khi thiết kế và phát triển các ứng dụng web, đôi khi chúng ta cần chọn tất cả các phần tử con của một phần tử ngoại trừ phần tử cuối cùng. Để chọn tất cả trẻ em của một yếu tố ngoại trừ đứa trẻ cuối cùng, hãy sử dụng: không và: các lớp giả kết nối cuối cùng.

li {
  background: slategrey;
}
/* select the second-last item */
li:nth-last-of-type(2) {
  background: lightslategrey;
}

Bộ chọn :nth-last-of-type 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. Nó có chức năng giống như :nth-of-type ngoại trừ nó chọn các mục bắt đầu ở dưới cùng của thứ tự nguồn, không phải đầu.

• Giả sử chúng ta có một danh sách không có thứ tự và muốn làm nổi bật mục thứ hai đến cuối cùng (trong ví dụ chính xác này, mục thứ tư thứ tư):
• Thay vì làm một cái gì đó như thêm một lớp vào mục danh sách (ví dụ:

  ul > li:nth-last-of-type(-n+2) {
      background: green;
  }
  

  0), chúng tôi có thể sử dụng :nth-last-of-type:
• Như bạn có thể thấy, :nth-last-of-type có một đối số: Đây có thể là một số nguyên duy nhất, các từ khóa, ngay cả hoặc hoặc Odd Odd, 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 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ột mảng trong JavaScript. Các từ khóa, ngay cả những người khác và lẻ lẻ rất đơn giản (lần lượt là 2, 4, 6, v.v. hoặc 1, 3, 5, vv). Công thức được xây dựng bằng cú pháp

  ul > li:nth-last-of-type(-n+2) {
      background: green;
  }
  

  3, 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ứ hai với công thức

ul > li:nth-last-of-type(-n+2) {
    background: green;
}

4, 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 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 (2, 4, 6, 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 :nth-last-of-type hợp lệ:
• Xem bút CSS-tricks :: thứ hai của Chris Coyier (@Chriscoyier) trên Codepen.

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 :nth-last-of-type ngoài kia:

• CSS-Tricks Tester
• Người kiểm tra Lea Verou từcritical difference: it is more specific. In our example above they would produce the same result because we are iterating over only

  :last-child,
  :nth-last-child(2) {
    ruleset
  }
  

  1 elements, but if we were iterating over a more complex group of siblings,

  :last-child,
  :nth-last-child(2) {
    ruleset
  }
  

  0 would try to match all siblings, not only siblings of the same element type. This reveals the power of :nth-last-of-type—it targets a particular type of element in an arrangement with relation to similar siblings, not all siblings.

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

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

• 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
Làm	3.2+	Làm	3.2+	9,5+	Làm	Làm

3.2+

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

Làm thế nào để bạn chọn hai CSS trẻ em cuối cùng?

Làm thế nào để bạn chọn hai yếu tố đầu tiên trong CSS?

Làm thế nào để bạn chọn tất cả trừ phần tử cuối cùng trong CSS?