我想有多个"OL"名单,其中计数器的值并没有列出之间重置.另一种说法是我希望第二个列表中第一个"li"的计数器比前一个列表的最后一个元素的计数器值高一个.是否有一些CSS魔法可以做到这一点?
仅使用 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>\nRun Code Online (Sandbox Code Playgroud)\n\n\xe2\x80\xa6 但你不能只是将两个列表一个接一个地拖放,然后让第二个列表自动从另一个列表的位置开始(请参阅第二个 CSS 规则中的“3”)。不过,只要有一点创造力,您就可以将counter-reset用一些 PHP 或您用来构建网站的任何内容来包装样式。当然,这取决于您的具体情况。