Thí dụ
Chỉ định màu nền cho phần tử là con cuối cùng của cha mẹ:
P: Last-Child {& nbsp; Bối cảnh: #FF0000; }
background: #ff0000;
}
Hãy tự mình thử »
Định nghĩa và cách sử dụng
Bộ chọn :last-child
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]. p:last-child is equal to p:nth-last-child[1].
CSS3 |
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.
:con cuối cùng | 4.0 | 9.0 | 3.5 | 3.2 | 9.6 |
CSS Cú pháp
: Last-Child {& nbsp; Tuyên bố CSS;} Bản demo
css declarations;
} Demo
Làm cách nào để có được 4 đứa con cuối cùng trong CSS?
Cú pháp. Lớp giả thứ n-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. : thứ n-last-child [[của]?]
Thí dụ
background: red;
}
Chỉ định màu nền cho mọi yếu tố là con thứ hai của cha mẹ, đếm từ đứa trẻ cuối cùng:
p: nth-last-child [2] {& nbsp; & nbsp; nền: màu đỏ; }
Hãy tự mình thử »
Thêm ví dụ "hãy thử nó" dưới đây.
Định nghĩa và cách sử dụng
Bộ chọn :nth-last-child[n]
phù hợp với mọi yếu tố là đứa trẻ thứ n, bất kể loại cha mẹ của nó, đếm từ đứa trẻ cuối cùng. Look at the :nth-last-of-type[] selector to select the element that is the nth child, of a specified type, of its parent, counting from the last child.
n có thể là một số, một từ khóa hoặc một công thức. |
Mẹo: Nhìn vào bộ chọn: bộ chọn thứ n-loại [] để chọn phần tử là đứa trẻ thứ n, thuộc loại được chỉ định, của cha mẹ của nó, đếm từ đứa trẻ cuối cùng.
CSS3
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. | 4.0 | 9.0 | 3.5 | 3.2 | 9.6 |
Bộ chọn
: thứ n-last-child []
css declarations;
} Demo
CSS Cú pháp
Làm cách nào để có được 4 đứa con cuối cùng trong CSS?
Cú pháp. Lớp giả thứ n-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. : thứ n-last-child [[của]?]
Thí dụ
Chỉ định màu nền cho mọi yếu tố là con thứ hai của cha mẹ, đếm từ đứa trẻ cuối cùng:
background: red;
}
p: nth-last-child [2] {& nbsp; & nbsp; nền: màu đỏ; }
background: blue;
}
Chỉ định màu nền cho mọi yếu tố là con thứ hai của cha mẹ, đếm từ đứa trẻ cuối cùng:
Làm cách nào để có được 4 đứa con cuối cùng trong CSS?
Cú pháp. Lớp giả thứ n-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. : thứ n-last-child [[của]?]
Thí dụ
Chỉ định màu nền cho mọi yếu tố là con thứ hai của cha mẹ, đếm từ đứa trẻ cuối cùng:
background: red;
}
Chỉ định màu nền cho mọi yếu tố là con thứ hai của cha mẹ, đếm từ đứa trẻ cuối cùng:
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. Class pseudo :nth-last-child[]
CSS pseudo-class matches elements based on their position among a group of siblings, counting from the end.Thử nó
Cú pháp
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[ [ of ]? ]
Giá trị từ khóa
odd
Đạ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.
First line
Second line
Third line
Fourth line
Fifth line
0Đạ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
First line
Second line
Third line
Fourth line
Fifth line
1Đạ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
First line
Second line
Third line
Fourth line
Fifth line
2, cho mỗi số nguyên dương hoặc giá trị bằng không là
First line
Second line
Third line
Fourth line
Fifth line
3. Chỉ số của phần tử đầu tiên, đếm từ cuối, là
First line
Second line
Third line
Fourth line
Fifth line
4. Các giá trị
First line
Second line
Third line
Fourth line
Fifth line
5 và
First line
Second line
Third line
Fourth line
Fifth line
6 phải là
First line
Second line
Third line
Fourth line
Fifth line
7.Ví dụ
Ví dụ bộ chọn
First line
Second line
Third line
Fourth line
Fifth line
8 hoặc
First line
Second line
Third line
Fourth line
Fifth line
9Đạ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 {
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 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;
}
1Đạ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;
}
2Đạ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;
}
3Đạ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;
}
4Đạ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;
}
5Đạ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;
}
6 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;
}
7Đạ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;
}
8 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;
}
9 đơn giản. .A list of four items [styled]:
One
Two
Three
Four
A list of two items [unstyled]:
One
Two
3 hoặc A list of four items [styled]:
One
Two
Three
Four
A list of two items [unstyled]:
One
Two
4Đạ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;
}
8 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 :last-child
.Ví dụ bảng
HTML
First line
Second line
Third line
Fourth line
Fifth line
CSS
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;
}
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ả pseudo và tổ hợp anh chị em chung.
HTML
A list of four items [styled]:
One
Two
Three
Four
A list of two items [unstyled]:
One
Two
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
Thông số kỹ thuật # nth-last-child-pseudo |
Sự chỉ rõ
Người chọn cấp độ 4 # thứ n-last-child-pseudo