Làm thế nào tôi có thể nhận được các yếu tố cuối cùng (hr) từ đoạn mã sau:CSS3 có được yếu tố cuối cùng
<div>
<div>
<span class="hr"></span>
</div>
<div>
<span class="hr"></span>
</div>
<div>
<span class="hr"></span> <!-- I need this -->
</div>
</div>
.hr:last-child không hoạt động cho việc này.
Tất nhiên, cấu trúc DOM có thể phức tạp hơn. Tôi chỉ cần lấy phần tử cần thiết cuối cùng.
Câu hỏi của bạn không rõ ràng; có một số cách để lấy phần tử .hr cuối cùng từ ví dụ của bạn, nhưng bạn nói "Cấu trúc DOM có thể phức tạp hơn". Để trả lời câu hỏi của bạn, bạn cần đề cập đến những cấu trúc DOM có thể có; trong một số nó có thể là có thể, trong một số nó sẽ không được.
Dưới đây là một cách để có được những .hr ra khỏi cuối cùng div:
div div:last-of-type .hr
Dưới đây là một cách khác để có được những .hr ra khỏi đứa trẻ cuối cùng của bên ngoài div:
div :last-child .hr
Nếu bạn cần lấy phần tử .hr cuối cùng ra khỏi tài liệu, bất kể nội dung bên trong là gì, thì bạn không thể làm điều đó trong CSS. Trong CSS, bạn chỉ có thể chọn phần tử thứ nhất, cuối cùng hoặc n ở một cấp cụ thể của cấu trúc phân cấp, bạn không thể chọn phần tử cuối cùng của một số loại bất kể loại nào được lồng vào.
div:last-child .hr
nếu DOM là phức tạp, tôi không thể shure rằng .hr sẽ nằm trong div ... –
Sau đó, bạn nên đặt một cái gì đó giống như một 'class' trên những phần tử chứa các phần tử 'div' để xác định loại phần tử đó. Khi đã xong, thay đổi 'div' thành' .class'. –
Không, nó không phải là một giải pháp. –
Bài đăng tuyệt vời. 'không có gì bên trong, thì bạn không thể làm điều đó trong CSS', 5 năm sau, liệu điều này vẫn như vậy? Chỉ cần tò mò, cảm ơn! –
Tôi không tin bất cứ điều gì đã thay đổi liên quan đến điều này. [Bộ chọn CSS cấp 4] (https://drafts.csswg.org/selectors/#the-nth-child-pseudo) mở rộng ': nth-last-child()' và ': nth-last-of-type() 'để cho phép chỉ định một bộ chọn bổ sung ràng buộc tập hợp các phần tử mà bạn đang so khớp, vì vậy bạn có thể chọn phần tử cuối cùng với lớp' .hr' trong một tập hợp các anh chị em với ': nth-last-child (1/.hr) '. Họ không cho phép lựa chọn trên tất cả các yếu tố trong tài liệu, tuy nhiên, chỉ ra khỏi anh chị em của một yếu tố cha mẹ chung. Và tôi nghĩ rằng không có trình duyệt nào hỗ trợ cú pháp này; đó là bản nháp –
[Bản nháp trước của Bộ chọn CSS Cấp 4] (http://www.w3.org/TR/2013/WD-selectors4-20130502/#the-nth-last-match-pseudo) có một phần tử thứ {: n -trường lớp giả (1 of .hr) có thể làm điều mà câu hỏi ban đầu được yêu cầu, nhưng nó đã bị loại bỏ, có lẽ là không thực tế. –