如何在不重置計數器的情況下在列表中使用CSS計數器？

我想要有多個「ol」列表，其中計數器值不是而是在列表之間重置。另一種說法是，我希望第二個列表中第一個「li」的計數器比先前列表中最後一個元素的計數器值高一個。有沒有一些CSS魔法可以做到這一點？如何在不重置計數器的情況下在列表中使用CSS計數器？

來源

2013-01-22 Paul Hoffman

不完全只用CSS。它確實爲您提供了一些control over counters（和support is pretty good），但它的行爲仍然是靜態的。所以這個工程：

<html> 
<head> 
<style> 
    #list-one { 
     counter-reset : item; 
    } 
    #list-two { 
     counter-reset : item 3; 
    } 
    li { 
     display : block; 
    } 
    li:before { 
     display : inline-block; 
     content : counter(item) ". "; 
     counter-increment : item; 
    } 
</style> 
</head> 
<body> 
    <ol id="list-one"> 
     <li>One</li><li>Two</li><li>Three</li> 
    </ol> 
    <ol id="list-two"> 
     <li>Four</li><li>Five</li><li>Six</li> 
    </ol> 
</body> 
</html>

...但你不能剛落，兩個列表後互相有第二個自動拿起另一不放過（見「3」中的第二CSS規則）。儘管有一點創意，但你可能會用counter-reset樣式來包裝一些PHP或你用來構建網站的任何東西。當然，這取決於您的具體情況。

來源

2013-01-22 22:35:22

雖然Su's answer可以工作，但您並不需要如此強硬。只需重置頂部的計數器，並在任何地方使用它，它都會增加。

body { 
    counter-reset: item; 
} 

li { 
    display: block; 
} 

li:before { 
    display: inline-block; 
    content: counter(item) ". "; 
    counter-increment: item; 
}

看到這個example

來源

2016-05-02 15:46:41

這就是全部的正確答案。 –

如何在不重置計數器的情況下在列表中使用CSS計數器？

回答

相關問題