8

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

4

2 回答 2

3

虽然苏的回答会奏效，但您不必如此严厉。只需重置顶部的计数器，在您使用它的任何地方，它都会增加。

body {
  counter-reset: item;
}

li {
  display: block;
}

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

看这个例子

于 2016-05-02T15:46:41.813 回答
2

不完全是 CSS。它确实为您提供了对计数器的一些控制（并且支持非常好），但它的行为仍然是静态的。所以这有效：

<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”）。不过，只要有一点创意，您就可以counter-reset用一点 PHP 或任何您用来构建网站的东西来包装样式。当然，这取决于您的具体情况。

于 2013-01-22T22:35:22.390 回答