Question

我希望有多个“ol”列表，其中计数器值在列表之间不重置。另一种说法是我希望第二个列表中第一个“li”的计数器比前一个列表的最后一个元素的计数器值高一个。是否有一些CSS魔法可以做到这一点？

Answer 1

不仅仅是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>

...但是你不能只是在彼此之后删除两个列表并且第二个列表自动拾取另一个停止的地方（参见第二个CSS规则中的“3”）。但是，如果有一点创造力，你可以用{@ 1}}样式包装一些PHP或者你用来构建你网站的任何东西。当然，这取决于您的具体情况。

Answer 2

虽然Su's answer可行，但你不需要如此苛刻。只需重置顶部的计数器，无论您在何处使用它，它都会递增。

body {
  counter-reset: item;
}

li {
  display: block;
}

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

请参阅此example

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

2 个答案: