如何在列表中使用CSS计数器而不重置计数器?

Pau*_*man 8 css

我想有多个"OL"名单,其中计数器的值并没有列出之间重置.另一种说法是我希望第二个列表中第一个"li"的计数器比前一个列表的最后一个元素的计数器值高一个.是否有一些CSS魔法可以做到这一点?

Su'*_*Su' 2

仅使用 CSS 则不然。它确实为您提供了对计数器的一些控制(并且支持非常好),但它的行为仍然是静态的。所以这有效:

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

\xe2\x80\xa6 但你不能只是将两个列表一个接一个地拖放,然后让第二个列表自动从另一个列表的位置开始(请参阅第二个 CSS 规则中的“3”)。不过,只要有一点创造力,您就可以将counter-reset用一些 PHP 或您用来构建网站的任何内容来包装样式。当然,这取决于您的具体情况。

\n