Các lớp giả CSS của CSS phù hợp với các yếu tố dựa trên vị trí của họ giữa một nhóm anh chị em, đếm từ cuối.:nth-last-child() CSS pseudo-class matches elements based on their position among a group of siblings, counting from the end. Cú phápPhân loại giả nth-last-child được chỉ định với một đối số duy nhất, đại diện cho mẫu cho các phần tử phù hợp, đếm từ cuối. :nth-last-child( <nth> [ of <complex-selector-list> ]? )
Giá trị từ khóaodd
Đại diện cho các yếu tố có vị trí số trong một loạt anh chị em là lẻ: 1, 3, 5, v.v., đếm từ cuối. evenĐại diện cho các yếu tố có vị trí số trong một loạt các anh chị em thậm chí là: 2, 4, 6, v.v., đếm từ cuối. Ký hiệu chức năng<An+B>
Đại diện cho các yếu tố có vị trí số trong một loạt các anh chị em phù hợp với mẫu <table>
<tbody>
<tr>
<td>First line</td>
</tr>
<tr>
<td>Second line</td>
</tr>
<tr>
<td>Third line</td>
</tr>
<tr>
<td>Fourth line</td>
</tr>
<tr>
<td>Fifth line</td>
</tr>
</tbody>
</table>
0, cho mỗi số nguyên dương hoặc giá trị bằng không của <table>
<tbody>
<tr>
<td>First line</td>
</tr>
<tr>
<td>Second line</td>
</tr>
<tr>
<td>Third line</td>
</tr>
<tr>
<td>Fourth line</td>
</tr>
<tr>
<td>Fifth line</td>
</tr>
</tbody>
</table>
1. Chỉ số của phần tử đầu tiên, đếm từ cuối, là <table>
<tbody>
<tr>
<td>First line</td>
</tr>
<tr>
<td>Second line</td>
</tr>
<tr>
<td>Third line</td>
</tr>
<tr>
<td>Fourth line</td>
</tr>
<tr>
<td>Fifth line</td>
</tr>
</tbody>
</table>
2. Các giá trị <table>
<tbody>
<tr>
<td>First line</td>
</tr>
<tr>
<td>Second line</td>
</tr>
<tr>
<td>Third line</td>
</tr>
<tr>
<td>Fourth line</td>
</tr>
<tr>
<td>Fifth line</td>
</tr>
</tbody>
</table>
3 và <table>
<tbody>
<tr>
<td>First line</td>
</tr>
<tr>
<td>Second line</td>
</tr>
<tr>
<td>Third line</td>
</tr>
<tr>
<td>Fourth line</td>
</tr>
<tr>
<td>Fifth line</td>
</tr>
</tbody>
</table>
4 phải là <table>
<tbody>
<tr>
<td>First line</td>
</tr>
<tr>
<td>Second line</td>
</tr>
<tr>
<td>Third line</td>
</tr>
<tr>
<td>Fourth line</td>
</tr>
<tr>
<td>Fifth line</td>
</tr>
</tbody>
</table>
5s.
Ví dụ bộ chọn<table>
<tbody>
<tr>
<td>First line</td>
</tr>
<tr>
<td>Second line</td>
</tr>
<tr>
<td>Third line</td>
</tr>
<tr>
<td>Fourth line</td>
</tr>
<tr>
<td>Fifth line</td>
</tr>
</tbody>
</table>
6 hoặc <table>
<tbody>
<tr>
<td>First line</td>
</tr>
<tr>
<td>Second line</td>
</tr>
<tr>
<td>Third line</td>
</tr>
<tr>
<td>Fourth line</td>
</tr>
<tr>
<td>Fifth line</td>
</tr>
</tbody>
</table>
7Đại diện cho các hàng lẻ của một bảng HTML: 1, 3, 5, v.v., đếm từ cuối. <table>
<tbody>
<tr>
<td>First line</td>
</tr>
<tr>
<td>Second line</td>
</tr>
<tr>
<td>Third line</td>
</tr>
<tr>
<td>Fourth line</td>
</tr>
<tr>
<td>Fifth line</td>
</tr>
</tbody>
</table>
8 hoặc <table>
<tbody>
<tr>
<td>First line</td>
</tr>
<tr>
<td>Second line</td>
</tr>
<tr>
<td>Third line</td>
</tr>
<tr>
<td>Fourth line</td>
</tr>
<tr>
<td>Fifth line</td>
</tr>
</tbody>
</table>
9Đại diện cho các hàng chẵn của một bảng HTML: 2, 4, 6, v.v., đếm từ cuối. table {
border: 1px solid blue;
}
/* Selects the last three elements */
tr:nth-last-child(-n + 3) {
background-color: pink;
}
/* Selects every element starting from the second to last item */
tr:nth-last-child(n + 2) {
color: blue;
}
/* Select only the last second element */
tr:nth-last-child(2) {
font-weight: 600;
}
0Đại diện cho yếu tố thứ bảy, đếm từ cuối. table {
border: 1px solid blue;
}
/* Selects the last three elements */
tr:nth-last-child(-n + 3) {
background-color: pink;
}
/* Selects every element starting from the second to last item */
tr:nth-last-child(n + 2) {
color: blue;
}
/* Select only the last second element */
tr:nth-last-child(2) {
font-weight: 600;
}
1Đại diện cho các yếu tố 5, 10, 15, v.v., đếm từ cuối. table {
border: 1px solid blue;
}
/* Selects the last three elements */
tr:nth-last-child(-n + 3) {
background-color: pink;
}
/* Selects every element starting from the second to last item */
tr:nth-last-child(n + 2) {
color: blue;
}
/* Select only the last second element */
tr:nth-last-child(2) {
font-weight: 600;
}
2Đại diện cho các yếu tố 4, 7, 10, 13, v.v., đếm từ cuối. table {
border: 1px solid blue;
}
/* Selects the last three elements */
tr:nth-last-child(-n + 3) {
background-color: pink;
}
/* Selects every element starting from the second to last item */
tr:nth-last-child(n + 2) {
color: blue;
}
/* Select only the last second element */
tr:nth-last-child(2) {
font-weight: 600;
}
3Đại diện cho ba yếu tố cuối cùng trong số một nhóm anh chị em. table {
border: 1px solid blue;
}
/* Selects the last three elements */
tr:nth-last-child(-n + 3) {
background-color: pink;
}
/* Selects every element starting from the second to last item */
tr:nth-last-child(n + 2) {
color: blue;
}
/* Select only the last second element */
tr:nth-last-child(2) {
font-weight: 600;
}
4 hoặc table {
border: 1px solid blue;
}
/* Selects the last three elements */
tr:nth-last-child(-n + 3) {
background-color: pink;
}
/* Selects every element starting from the second to last item */
tr:nth-last-child(n + 2) {
color: blue;
}
/* Select only the last second element */
tr:nth-last-child(2) {
font-weight: 600;
}
5Đại diện cho mọi yếu tố table {
border: 1px solid blue;
}
/* Selects the last three elements */
tr:nth-last-child(-n + 3) {
background-color: pink;
}
/* Selects every element starting from the second to last item */
tr:nth-last-child(n + 2) {
color: blue;
}
/* Select only the last second element */
tr:nth-last-child(2) {
font-weight: 600;
}
6 giữa một nhóm anh chị em. Điều này giống như một bộ chọn table {
border: 1px solid blue;
}
/* Selects the last three elements */
tr:nth-last-child(-n + 3) {
background-color: pink;
}
/* Selects every element starting from the second to last item */
tr:nth-last-child(n + 2) {
color: blue;
}
/* Select only the last second element */
tr:nth-last-child(2) {
font-weight: 600;
}
7 đơn giản. .<h4>A list of four items (styled):</h4>
<ol>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ol>
<h4>A list of two items (unstyled):</h4>
<ol>
<li>One</li>
<li>Two</li>
</ol>
1 hoặc <h4>A list of four items (styled):</h4>
<ol>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ol>
<h4>A list of two items (unstyled):</h4>
<ol>
<li>One</li>
<li>Two</li>
</ol>
2Đại diện cho mỗi table {
border: 1px solid blue;
}
/* Selects the last three elements */
tr:nth-last-child(-n + 3) {
background-color: pink;
}
/* Selects every element starting from the second to last item */
tr:nth-last-child(n + 2) {
color: blue;
}
/* Select only the last second element */
tr:nth-last-child(2) {
font-weight: 600;
}
6 là yếu tố đầu tiên trong số một nhóm anh chị em, đếm từ cuối. Điều này giống như bộ chọn <h4>A list of four items (styled):</h4>
<ol>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ol>
<h4>A list of two items (unstyled):</h4>
<ol>
<li>One</li>
<li>Two</li>
</ol>
4.Ví dụ bảngHTML<table>
<tbody>
<tr>
<td>First line</td>
</tr>
<tr>
<td>Second line</td>
</tr>
<tr>
<td>Third line</td>
</tr>
<tr>
<td>Fourth line</td>
</tr>
<tr>
<td>Fifth line</td>
</tr>
</tbody>
</table>
CSStable {
border: 1px solid blue;
}
/* Selects the last three elements */
tr:nth-last-child(-n + 3) {
background-color: pink;
}
/* Selects every element starting from the second to last item */
tr:nth-last-child(n + 2) {
color: blue;
}
/* Select only the last second element */
tr:nth-last-child(2) {
font-weight: 600;
}
Kết quả
Truy vấn số lượngMột yếu tố kiểu truy vấn số lượng tùy thuộc vào số lượng trong số chúng có. Trong ví dụ này, danh sách các mục chuyển sang màu đỏ khi có ít nhất ba trong số chúng trong một danh sách nhất định. Điều này được thực hiện bằng cách kết hợp các khả năng của lớp giả và bộ kết hợp anh chị em chung. HTML<h4>A list of four items (styled):</h4>
<ol>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ol>
<h4>A list of two items (unstyled):</h4>
<ol>
<li>One</li>
<li>Two</li>
</ol>
CSS/* If there are at least three list items,
style them all */
li:nth-last-child(n + 3),
li:nth-last-child(3) ~ li {
color: red;
}
Kết quảTruy vấn số lượng
| Một yếu tố kiểu truy vấn số lượng tùy thuộc vào số lượng trong số chúng có. Trong ví dụ này, danh sách các mục chuyển sang màu đỏ khi có ít nhất ba trong số chúng trong một danh sách nhất định. Điều này được thực hiện bằng cách kết hợp các khả năng của lớp giả và bộ kết hợp anh chị em chung. |
|---|
Thông số kỹ thuật
# nth-last-child-pseudo
|
Sự chỉ rõThông số kỹ thuật không xác định # thứ n-last-child-pseudo Tính tương thích của trình duyệt web
Làm thế nào để bạn chọn đứa con cuối cùng thứ n trong CSS?
CSS: Bộ chọn thứ n-last-child ().. Chỉ định một màu nền cho mọi yếu tố là con thứ hai của cha mẹ, đếm từ đứa con cuối cùng: p: nth-last-child (2) {.... Odd và thậm chí là các từ khóa có thể được sử dụng để phù hợp với các phần tử con có chỉ số là lẻ hoặc thậm chí. .... Sử dụng một công thức (An + B) .. Đứa con thứ n trong CSS là gì?
Cú pháp. : nth-child () lấy một đối số duy nhất mô tả một mẫu cho các chỉ số phần tử phù hợp trong danh sách anh chị em. Chỉ số phần tử là dựa trên 1. : Nth-child ([của]?)takes a single argument that describes a pattern for matching element indices in a list of siblings. Element indices are 1-based. :nth-child( [ of ]? )
Đứa trẻ cuối cùng trong CSS là gì?
Các: CSS-Class CSS cuối cùng đại diện cho yếu tố cuối cùng trong số một nhóm các yếu tố anh chị em.represents the last element among a group of sibling elements.
Làm thế nào để tôi sử dụng đứa trẻ cuối cùng trong CSS?
CSS: Bộ chọn-con cuối cùng.. Định nghĩa và cách sử dụng.: Bộ chọn-con cuối cùng khớp với mọi yếu tố là con cuối cùng của cha mẹ.Mẹo: P: Last-Chill bằng P: Nth-Last-Child (1)..... Hỗ trợ trình duyệt.Các số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ hoàn toàn bộ chọn..... CSS Cú pháp.:con cuối cùng {. Đứa con thứ n là gì?
: Nth-child () là bộ chọn phân loại giả CSS cho phép bạn chọn các phần tử dựa trên chỉ mục của chúng (thứ tự nguồn) bên trong thùng chứa của chúng.Bạn có thể chuyển theo số dương dưới dạng đối số cho: nth-child (), sẽ chọn một phần tử có chỉ mục bên trong cha mẹ của nó phù hợp với đối số của: nth-child ().a CSS pseudo-class selector that allows you to select elements based on their index (source order) inside their container. You can pass in a positive number as an argument to :nth-child() , which will select the one element whose index inside its parent matches the argument of :nth-child() .
Đứa con đầu lòng và đứa con cuối cùng trong CSS là gì?
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.: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. | 
