Hướng dẫn css not(:last-child) - css not (: last-child)
Định nghĩa và sử dụng
Cấu trúc:last-child {
property: value;
}Ví dụHTML viết:
Hiển thị trình duyệt khi chưa có CSS:Thành phần thứ nhất Thành phần thứ 2 Thành phần thứ 3 Thành phần thứ 4 Thành phần thứ 5 Thành phần thứ 6 Thành phần thứ nhấtThành phần thứ 2 Thành phần thứ 3 Thành phần thứ 4 Thành phần thứ 5 Thành phần thứ 6 Thành phần thứ nhất
Thành phần thứ 3 Thành phần thứ 4 Thành phần thứ 5 Thành phần thứ 6 ul cùng cấp với p, nên tất cả li bên trong đều được coi là thành phần thứ 2 Thành phần độc lập thứ nhất Thành phần độc lập thứ 2 Thành phần độc lập thứ 3 Thành phần độc lập thứ 4 Thành phần độc lập thứ 5 Thành phần độc lập thứ 6p:last-child{
color: blue;
}CSS viết:Thành phần thứ nhất Thành phần thứ 2 Thành phần thứ 3 Thành phần thứ 4 Thành phần thứ 5 Thành phần thứ 6 Thành phần thứ nhấtThành phần thứ 2 Thành phần thứ 3 Thành phần thứ 4 Thành phần thứ 5 Thành phần thứ 6 Thành phần thứ nhất
Thành phần thứ 3 Thành phần thứ 4 Thành phần thứ 5 Thành phần thứ 6 ul cùng cấp với p, nên tất cả li bên trong đều được coi là thành phần thứ 2 Thành phần độc lập thứ nhất Thành phần độc lập thứ 2 Thành phần độc lập thứ 3 Thành phần độc lập thứ 4 Thành phần độc lập thứ 5 Thành phần độc lập thứ 6 CSS viết:Hiển thị trình duyệt khi đã có css: Xem thảo luận Cải thiện bài viết Lưu bài viết Xem thảo luận Cải thiện bài viết Lưu bài viết Đọc HTML
0 <2 >4 5 6 7 6 9 6 p:last-child{
color: blue;
}16 p:last-child{
color: blue;
}36 p:last-child{
color: blue;
}56 p:last-child{
color: blue;
}76 p:last-child{
color: blue;
}96 6 6 6 6 4 <16 <36 <56 <76 <96 html14 0 html52 >
2 >8>0 <2 >8>0 <2 >8>4 <
2 >8>0 <2 >8>0 <2 >8>0 html5>6>
2 >8>0 <2 >8>0 <2 >8>4 <
Output: Các trình duyệt được hỗ trợ: After applying the pseudo selector :not(:last-child):after to the above example. HTML
6 0 <2 >4 5 6 7 6 9 6 p:last-child{
color: blue;
}16 p:last-child{
color: blue;
}36 p:last-child{
color: blue;
}56 p:last-child{
color: blue;
}76 p:last-child{
color: blue;
}96 6 6 6 4 4 <16 <36 <56 <76 <96 html14 4 p:last-child{
color: blue;
}096 p:last-child{
color: blue;
}114 0 html52 >
____10 4 <>6 >7>8<6__777766664 <>6 >7>8<6__777766660 html5>6>____10 4 <>6 >7>8<6__777766664 <>6 >7>8<6__777766660 html5>6>____10 4 <>6 >7>8<6__777766664 <>6 >7>8<6__777766660 html5>6>
____10 Output:  Explanation:
: Sau đây là một bộ chọn tuyệt vời để thêm nội dung (hoặc đôi khi, thậm chí các phần tử cấp khối) sau các phần tử được chọn (ở đây là phần bên trong đầu tiên trong mỗi bộ các bộ phận bên trong). Vì vậy, nội dung ‘không ở DIV phía dưới thực sự chỉ được thêm vào div trên cùng chứ không phải ở DIV phía dưới. Ví dụ 3: & nbsp; & nbsp;
0 <2 >4 6 6 6 4 4 HTML 4 0 html52 >
6
2 >8>0 <>0 <>6>6>0 <>4 <>4 <>0 <2 >8>4 <<03>4 <<09>0 html5>
Output: Thành phần thứ nhất Thành phần thứ 2 Thành phần thứ 3 Thành phần thứ 4 Thành phần thứ 5 Thành phần thứ 6 Thành phần thứ 3 Thành phần thứ 4 Thành phần thứ 5 Thành phần thứ 6 Thành phần thứ 3 Thành phần thứ 4 Thành phần thứ 5 Thành phần thứ 6 Thành phần độc lập thứ nhất Thành phần độc lập thứ 2 Thành phần độc lập thứ 3 Thành phần độc lập thứ 4 Thành phần độc lập thứ 5 Thành phần độc lập thứ 6
Opera |
