我可以得到家長的CSS計數器值嗎？

我需要實現以下列表樣式：我可以得到家長的CSS計數器值嗎？

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

我怎樣才能得到父母的計數器值在:before內容我的子項的使用？（02在我上面的例子中）

來源

2011-11-18 Colin

您使用兩個不同的計數器：一個用於li父母和一個用於li子項目。然後，在每個子項li，串聯使用各計數器多個counter()功能，如下所示：

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，在支持:before和CSS2.1計數器包括IE8 +

有用讀取所有的瀏覽器進行測試：W3C CSS2.1 generated content spec, §12.4.1 Nested counters and scope

來源

2011-11-18 18:30:33 BoltClock

+1爲'counter-increment'，但它來'01a 02b'不是'02a 02b' – diEcho

@diEcho：固定！再次感謝您提前指出錯誤:) – BoltClock

太棒了！您可以將任何列表樣式類型應用於計數器，以便您可以使用「decimal-leading-zero」。謝謝您的幫助。 – Colin

-1

不，CSS不支持這種「可變」的東西。你所能做的就是設置與父母相同的風格。

來源

2011-11-18 18:26:14

錯誤，沒有計數器的CSS 2.1規範是強大的。我的問題是關於如何獲取多個計數器實例。 Theres都是一個counter（）和counter（）函數。 counters（）返回完整計數樹，但不能單獨格式化樹的每個分支的列表樣式類型。在我問我的問題之前，我用counter（）走錯了路。 – Colin

請參閱this：在CSS中無法做這樣的事情，顯然你需要使用JavaScript，但僞元素不在DOM afaik中。至於其他答案：他想要在列表項之前出現的計數器的值。

來源

2011-11-18 18:32:01 Viruzzo

你不能通過JavaScript獲得CSS計數器的值，但你仍然可以使用CSS訪問它。計數器是一個複雜的小東西，但請查看我的答案。 – BoltClock

我想我誤解了這個問題，因爲我想能夠讀取計數器值（因此需要JavaScript）。問題中的「獲得」誤導了我（但公平地說，它僅用於CSS標記）。 – Viruzzo

我可以得到家長的CSS計數器值嗎？

回答

相關問題