Các. lớp giả nth-last-child[] đại diện cho một phần tử có an+b anh chị em sau nó trong cây tài liệu, với bất kỳ giá trị nguyên dương hoặc giá trị 0 nào của n và có phần tử cha
cú pháp
selector:nth-last-child[an+b]{ properties }
điểm, lưu ý
- Các ví dụ về an+b như sau
- . nth-last-child[odd] /* đại diện cho tất cả các phần tử foo lẻ trong phần tử cha của chúng, tính từ phần tử cuối cùng */
- . nth-last-child[-n+2] /* đại diện cho hai phần tử cuối cùng */
Thí dụ
[Phong cách. css]
tr:nth-last-child[2n]{
background-color: yellow;
}
[mục lục. html]
This is first row.
This is second row.
This is third row.
This is fourth row.
Đặc tả Bộ chọn CSS Cấp 3 xác định. bộ chọn giả lớp nth-last-child[] trong 6. 6. 5. 3. . lớp giả nth-last-child[]
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ụ
Sự mô 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 những đứa trẻ 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;
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]
Thí 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
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
tr:nth-last-child[2n]{
background-color: yellow;
}
2 cho phép bạn nhắm mục tiêu phần tử cuối cùng trực tiếp bên trong phần tử chứa nó. 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 nội dung chính và nội dung anh chị emGiả sử chúng ta có một bài báo và muốn làm cho đoạn cuối nhỏ hơn, để đóng vai trò là phần kết luận cho nội dung [như ghi chú của biên tập viên]
Lorem ipsum...
Dolor sit amet...
Consectetur adipisicing...
Last paragraph...
Thay vì sử dụng một lớp [e. g.
tr:nth-last-child[2n]{
background-color: yellow;
}
3], chúng ta có thể sử dụng tr:nth-last-child[2n]{
background-color: yellow;
}
2 để chọn nóp:last-child {
font-size: 0.75em;
}Sử dụng
tr:nth-last-child[2n]{
background-color: yellow;
}
2 rất giống với tr:nth-last-child[2n]{
background-color: yellow;
}
6 nhưng có một điểm khác biệt quan trọng. nó ít cụ thể hơn. tr:nth-last-child[2n]{
background-color: yellow;
}
2 sẽ chỉ cố gắng so khớp phần tử con cuối cùng của phần tử cha, trong khi tr:nth-last-child[2n]{
background-color: yellow;
}
8 sẽ khớp với lần xuất hiện cuối cùng của một phần tử được chỉ định, ngay cả khi phần tử đó không xuất hiện lần cuối trong HTML. Trong ví dụ trên, kết quả sẽ giống nhau, chỉ vì con cuối cùng của p:last-child {
font-size: 0.75em;
}p:last-child {
font-size: 0.75em;
} tr:nth-last-child[2n]{
background-color: yellow;
}
2. nó có thể xác định một phần tử có quan hệ với tất cả anh chị em của nó, không chỉ anh chị em cùng loạiVí dụ đầy đủ hơn dưới đây minh họa việc sử dụng
tr:nth-last-child[2n]{
background-color: yellow;
}
2 và bộ chọn lớp giả có liên quan, p:last-child {
font-size: 0.75em;
} tr:nth-last-child[2n]{
background-color: yellow;
}
1Các nguồn lực khác
- Có quan hệ với. con đầu lòng, loại cuối cùng,. hạng nhất
- Tài liệu Mozilla
Hỗ trợ trình duyệt
ChromeSafariFirefoxOperaIEAndroidiOSAny3.2+Any9.5+9+AnyAny tr:nth-last-child[2n]{
background-color: yellow;
}
2 đã đượ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ị