Tôi có thể nhận giá trị bộ đếm CSS của phụ huynh không?

Question

tôi cần phải thực hiện các phong cách danh sách sau đây:

 
01 Item 1 
02 Item 2 
    02a Item 2a 
    02b Item 2b 
03 Item 3 

Làm thế nào tôi có thể nhận được giá trị truy cập của phụ huynh để sử dụng trong nội dung :before mặt hàng phụ của tôi không? (02 trong ví dụ trên)

Answer 1

Bạn sử dụng hai bộ đếm khác nhau: một cho li cha mẹ và một cho các phụ đề li. Sau đó, trong mỗi li subitem, nối nhiều counter() chức năng sử dụng mỗi quầy, như thế này:

ol { 
    counter-reset: item; 
} 

ol ol { 
    counter-reset: subitem; 
} 

li { 
    display: block; 
} 

/* First level of parent items */ 
li:before { 
    content: counter(item, decimal-leading-zero) ' '; 
    counter-increment: item; 
} 

/* Second level of subitems */ 
li li:before { 
    /* counter(item) for the parents, counter(subitem) for the subitems */ 
    content: counter(item, decimal-leading-zero) counter(subitem, lower-alpha) ' '; 
    counter-increment: subitem; 
} 

jsFiddle demo, thử nghiệm trong tất cả các trình duyệt hỗ trợ :before và CSS2.1 quầy bao gồm IE8 +

đọc hữu ích: W3C CSS2.1 generated content spec, §12.4.1 Nested counters and scope

Answer 2

Không, CSS không hỗ trợ những thứ "biến" đó. Tất cả những gì bạn có thể làm là đặt cùng kiểu với cha mẹ.

Answer 3

Xem this: không có cách nào để thực hiện những việc như vậy trong CSS, rõ ràng là bạn sẽ cần phải sử dụng JavaScript cho nó nhưng các phần tử giả không nằm trong DOM afaik. Đối với các câu trả lời khác: anh ta muốn giá trị của bộ đếm xuất hiện trước các mục trong danh sách.