Không phải 2 css con cuối cùng

Question

tags as follows):

Trong CSS này. ví dụ con thứ n,. nth-last_child(-n+2) sẽ chọn và tạo kiểu cho hai thẻ cuối cùng có màu nền vàng. Tất cả các hàng khác trong bảng sẽ không được tạo kiểu bởi. bộ chọn con thứ n

Bộ chọn :nth-last-child 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 thông số kỹ thuật Cấp 3 của Bộ chọn CSS là "lớp giả cấu trúc", nghĩa là nó được sử dụng để tạo kiểu cho nội dung dựa trên mối quan hệ của nó với các phần tử cha và phần tử anh chị em. Nó hoạt động giống như

tr:nth-last-child(1) { background: cyan; }

0 ngoại trừ nó chọn các mục bắt đầu từ dưới cùng của thứ tự nguồn, không phải trên cùng

Giả sử chúng tôi có một danh sách với số lượng mục không xác định và chúng tôi muốn đánh dấu mục từ thứ hai đến mục cuối cùng (trong ví dụ chính xác này là “Mục thứ tư”)


  First Item
  Second Item
  Third Item
  Fourth Item
  Fifth Item

Thay vì làm điều gì đó như thêm một lớp vào mục danh sách (e. g.

tr:nth-last-child(1) { background: cyan; }

1) chúng ta có thể sử dụng :nth-last-child

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

Như bạn có thể thấy, :nth-last-child đưa ra một lập luận. đây có thể là một số nguyên, từ khóa “chẵn” hoặc “lẻ” hoặc một công thức. Nếu một số nguyên được chỉ định thì chỉ một phần tử được chọn – nhưng các từ khóa hoặc công thức sẽ lặp qua tất cả các phần tử con 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. Từ khóa “chẵn” và “lẻ” rất đơn giản (tương ứng là 2, 4, 6, v.v. hoặc 1, 3, 5). Công thức được xây dựng bằng cú pháp

tr:nth-last-child(1) { background: cyan; }

4, trong đó

“a” là một giá trị số nguyên
"n" là chữ cái "n"
“+” là một toán tử và có thể là “+” hoặc “-”
“b” là một số nguyên và bắt buộc phải có 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 qua từng phần tử anh chị em, xác định phần tử nào sẽ được chọn. Phần “n” của công thức, nếu được bao gồm, biểu thị một tập hợp các số nguyên dương tăng dần (giống như lặp qua một mảng). Trong ví dụ trên của chúng tôi, chúng tôi đã chọn mọi phần tử thứ hai với công thức

tr:nth-last-child(1) { background: cyan; }

5, công thức này hoạt động vì mỗi khi một phần tử được chọn, “n” tăng thêm một (2×0, 2×1, 2×2, 2×3, v.v.). Nếu thứ tự của một phần tử khớp với kết quả của phương trình, nó sẽ được chọn (2, 4, 6, v.v.). Để được giải thích sâu hơn về toán học liên quan, 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 {
  background: slategrey;
}
/* select the second-last item */
li:nth-last-child(2) {
  background: lightslategrey;
}

0 hợp lệ

Check out this Pen!

May mắn thay, không phải lúc nào bạn cũng phải tự mình tính toán—có một số công cụ kiểm tra và tạo :nth-last-child ngoài kia

Người thử nghiệm của Lea Verou

Điểm quan tâm

:nth-last-child lặp qua các phần tử bắt đầu từ dưới cùng của thứ tự nguồn. Sự khác biệt duy nhất giữa nó và
```
tr:nth-last-child(1) { background: cyan; }
```
0 là cái sau lặp qua các phần tử bắt đầu từ đầu thứ tự nguồn
Bộ chọn :nth-last-child rất giống với
```
li {
  background: slategrey;
}
/* select the second-last item */
li:nth-last-child(2) {
  background: lightslategrey;
}
```
0 nhưng có một điểm khác biệt quan trọng. nó ít cụ thể hơn. Trong ví dụ của chúng tôi ở trên, chúng sẽ tạo ra kết quả tương tự vì chúng tôi chỉ lặp qua các phần tử
```
li {
  background: slategrey;
}
/* select the second-last item */
li:nth-last-child(2) {
  background: lightslategrey;
}
```
6, nhưng nếu chúng tôi đang lặp qua một nhóm anh chị em phức tạp hơn, thì :nth-last-child sẽ cố gắng khớp tất cả các anh chị em, không chỉ các anh chị em cùng loại phần tử. Điều này cho thấy sức mạnh của :nth-last-child—nó có thể chọn bất kỳ phần tử anh chị em nào trong một sắp xếp, không chỉ các phần tử được chỉ định trước dấu hai chấm

Thuộc tính liên quan

con thứ n
nth-cuối cùng của loại
loại thứ n
hạng nhất
cuối cùng của loại

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

Tài liệu Mozilla
QuirksMode bài viết
bài viết sitepoint

Hỗ trợ trình duyệt

ChromeSafariFirefoxOperaIEAndroidiOSWorks3.2+Works9.5+9+WorksWorks

:nth-last-child đã được giới thiệu trong Bộ chọn CSS Mô-đun 3, có nghĩa là các phiên bản trình duyệt cũ không hỗ trợ nó. Tuy nhiên, hỗ trợ trình duyệt hiện đại là hoàn hảo và bộ chọn giả mới được sử dụng rộng rãi trong môi trường sản xuất. Nếu bạn yêu cầu hỗ trợ trình duyệt cũ hơn, hãy điền đầy đủ cho IE hoặc sử dụng các bộ chọn này theo những cách không quan trọng, đó là cải tiến liên tục, được khuyến nghị

Hướng dẫn CSS này giải thích cách sử dụng bộ chọn CSS được gọi là. nth-last-child với cú pháp và ví dụ

Nội dung chính Show

Sự miêu tả
Tham số hoặc Đối số
tính tương thích của trình duyệt web
Điểm quan tâm
Thuộc tính liên quan
Các nguồn lực khác
Hỗ trợ trình duyệt

Sự miêu tả

CSS. bộ chọn con cuối cùng thứ n cho phép bạn nhắm mục tiêu một phần tử là phần tử con cuối cùng thứ n trong phần tử cha của nó

cú pháp

Cú pháp cho. bộ chọn CSS đang hoạt động là

element:nth-last-child(value) { style_properties }

Tham số hoặc Đối số

phần tử Phần tử cuối cùng thứ n của loại phần tử đó trong phần tử cha của nó. giá trị

Xác định trẻ em nào sẽ nhắm mục tiêu. Nó có thể là một trong những điều sau đây

ValueDescriptionevenNhắm mục tiêu các phần tử con chẵn, bắt đầu từ phần tử con cuối cùng và ngược lại
tr. nth-last-con(thậm chí) { nền. màu xanh da trời; . Tương tự như khi sử dụng từ khóa chẵn
Công thức sẽ tính là 2x0, 2x1, 2x2, 2x3,. dẫn đến tất cả trẻ em chẵn đều được nhắm mục tiêu (làm việc ngược).
tr. nth-last-con(2n) { nền. màu xanh da trời; . nth-last-con(lẻ) { nền. màu xanh da trời; . Tương tự như khi sử dụng từ khóa lẻ
tr:nth-last-child(odd) { background: blue; }2n+1Also targets the odd children. Same as using the odd keyword
Công thức sẽ tính như (2x0)+1, (2x1)+1, (2x2)+1, (2x3)+1,. dẫn đến tất cả trẻ em lẻ đều được nhắm mục tiêu (làm việc ngược).
tr. nth-last-con(2n+1) { nền. màu xanh da trời; .
1 là con cuối cùng, 2 là con cuối cùng thứ hai, 3 là con cuối cùng thứ ba, v.v.
tr. nth-last-con(1) { nền. màu xanh da trời; . nth-last-con(2) { nền. màu xanh da trời; . nth-last-con(3) { nền. màu xanh da trời; . (làm ngược lại)
tr:nth-last-child(2) { background: blue; }
tr:nth-last-child(3) { background: blue; }-an+bTargets children based on the formula -an + b
Formula would calculate as (-ax0)+b, (-ax1)+b, (-ax2)+b, (-ax3)+b, ...(working backwards)
tr. nth-last-con(-n+2) { nền. màu xanh da trời;

style_propertiesCác kiểu CSS để áp dụng cho phần tử con cuối cùng thứ n

Ghi chú

Các. bộ chọn con cuối cùng thứ n là một lớp giả cho phép bạn nhắm mục tiêu một phần tử là phần tử con cuối cùng thứ n trong phần tử cha của nó
Xem thêm. con thứ n,. con đầu lòng,. đứa con cuối cùng, và. bộ chọn con một

tính tương thích của trình duyệt web

CSS. bộ chọn con thứ n có hỗ trợ cơ bản với các trình duyệt sau

Trình duyệt Chrome
Firefox (Tắc kè)
Internet Explorer 9+ (IE 9+)
Opera 9. 5+
Safari (WebKit)

Ví dụ

Chúng tôi sẽ thảo luận về. bộ chọn con thứ n bên dưới, khám phá các ví dụ về cách sử dụng bộ chọn này trong CSS để áp dụng kiểu dáng cho phần tử thứ n

Hãy xem một CSS. ví dụ nth-last-child nơi chúng tôi áp dụng. bộ chọn con thứ n có giá trị nguyên

CSS sẽ trông như thế này

tr:nth-last-child(1) { background: cyan; }

HTML sẽ trông như thế này


  
    Column 1 Heading
    Column 2 Heading
  
  
    techonthenet.com
    Technical reference site
  
  
    checkyourmath.com
    Math calculation site
  
  
    bigactivities.com
    Kids activity site

The result would look like this (The :nth-last-child selector would style the

programming css

Không phải 2 css con cuối cùng

Sự miêu tả

cú pháp

Tham số hoặc Đối số

Ghi chú

tính tương thích của trình duyệt web

Ví dụ

Điểm quan tâm

Thuộc tính liên quan

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

Hỗ trợ trình duyệt

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội