2012-03-13 55 views
15

Có khả năng nào để lấy phần tử thứ n của danh sách có thứ tự trong CSS2 không?Làm cách nào để nhận con thứ n của một phần tử bằng bộ chọn CSS2?

(tương tự như :nth-child() trong CSS3)


FYI: Tôi đang cố gắng để chương trình phiên bản tiếng Đức của Parcheesi là XHTML 1.1 và CSS2 tuân thủ và cố gắng để tạo ra các sân chơi thể thao bằng cách sử dụng danh sách có thứ, vì vậy các tùy chọn chuyển động được xác định trước bởi cấu trúc dữ liệu. Để định vị đường xung quanh trung tâm, tôi muốn chọn các phần tử danh sách theo số.

Trả lời

23

Bạn có thể sử dụng adjacent sibling combinators kết hợp với :first-child pseudo-class, lặp lại những combinators nhiều lần như bạn cần để đạt được một đứa trẻ thứ n nào đó. Điều này cũng được đề cập trong số an answer to a different question.

Đối với bất kỳ thành phần nào E, hãy bắt đầu bằng E:first-child, sau đó thêm + E cho các trẻ tiếp theo cho đến khi bạn đến được phần tử bạn đang nhắm mục tiêu. Bạn không phải sử dụng cùng một thành phần E, tất nhiên; bạn có thể chuyển đổi nó ra cho bất kỳ loại, lớp, ID, vv, nhưng các bit quan trọng là các dấu hiệu :first-child+.

Ví dụ, để có được những thứ ba li của ol, CSS3 chọn sau đây của nó:

ol > li:nth-child(3) 

sẽ được nhân rộng trong CSS2 như vậy:

ol > li:first-child + li + li 

Một minh họa:

<ol> 
    <li></li> <!-- ol > li:nth-child(1), ol > li:first-child --> 
    <li></li> <!-- ol > li:nth-child(2), ol > li:first-child + li --> 
    <li></li> <!-- ol > li:nth-child(3), ol > li:first-child + li + li --> 
    <li></li> <!-- ol > li:nth-child(4), ol > li:first-child + li + li + li --> 
</ol> 

Lưu ý rằng kể từ there are no sibling combinators that look at preceding siblings (không phải trong CSS2 hoặc CSS3), bạn không thể mô phỏng :nth-last-child() hoặc :last-child bằng cách sử dụng bộ chọn CSS2.

Ngoài ra, bạn chỉ có thể mô phỏng :nth-child(b) cho một trẻ cụ thể tại một thời điểm, trong đó b là số không đổi trong công thức an+b (như được mô tả trong spec); bạn không thể đạt được bất kỳ công thức phức tạp nào với các combinators anh chị em liền kề một mình.

Các vấn đề liên quan