Question

我不能让我的CSS计数器工作。他们确实以某种方式工作，但是在嵌套级别下降它们是关闭的。

这是我的测试页面：

<!DOCTYPE HTML>
<html>
<head>
  <title>Chapter Numbering</title>

  <style type="text/css">
    div {
      counter-reset: myitemcounter;
    }
    h3::before {
      counter-increment: myitemcounter;
      content: counters(myitemcounter, ".") " ";
    }
  </style>
</head>

<body>

  <div>
    <h3>This should be ... 1 </h3>
    <h3>This should be ... 2 </h3>
    <div>
      <h3>This should be ... 2.1 </h3>
      <h3>This should be ... 2.2 </h3>
      <h3>This should be ... 2.3 </h3>
      <div>
        <h3>This should be ... 2.3.1 </h3>
        <h3>This should be ... 2.3.2 </h3>
      </div>
      <h3>This should be ... 2.4 </h3>
      <div>
        <h3>This should be ... 2.4.1 </h3>
      </div>
    </div>
    <h3>This should be ... 3 </h3>
    <div>
      <h3>This should be ... 3.1 </h3>
      <h3>This should be ... 3.2 </h3>
    </div>
  </div>

</body>
</html>

预期数字位于标题项目的文本中。实际输出是（2.3.2之后错误）：

1     This should be ... 1
2     This should be ... 2
2.1   This should be ... 2.1
2.2   This should be ... 2.2
2.3   This should be ... 2.3
2.3.1 This should be ... 2.3.1
2.3.2 This should be ... 2.3.2
2.3.3 This should be ... 2.4
2.3.1 This should be ... 2.4.1
2.4   This should be ... 3
2.1   This should be ... 3.1
2.2   This should be ... 3.2

感谢您的帮助。

Answer 1

来自the spec：

计数器的范围从文档中具有＆＃39;计数器重置＆＃39;的第一个元素开始。该计数器包括元素的后代及其后代的兄弟姐妹。

重要的一点是，由reset创建的计数器的范围是兄弟姐妹和兄弟姐妹。因此，当您重置div时，这也适用于以下任何h3元素。

您可以按照预期的方式工作，而不是重置div的第一个孩子的计数器：

div > :first-child {
    counter-reset: myitemcounter;
}

http://jsfiddle.net/9eabn3L3/6

＆＃13;

div > :first-child {
    counter-reset: myitemcounter;
}
h3::before {
    counter-increment: myitemcounter;
    content: counters(myitemcounter, ".")" ";
}

＆＃13;

<div>
    <h3>This should be ... 1 </h3>
    <h3>This should be ... 2 </h3>
    <div>
        <h3>This should be ... 2.1 </h3>
        <h3>This should be ... 2.2 </h3>
        <h3>This should be ... 2.3 </h3>
        <div>
            <h3>This should be ... 2.3.1 </h3>
            <h3>This should be ... 2.3.2 </h3>
        </div>
        <h3>This should be ... 2.4 </h3>
        <div>
            <h3>This should be ... 2.4.1 </h3>
        </div>
    </div>
    <h3>This should be ... 3 </h3>
    <div>
        <h3>This should be ... 3.1 </h3>
        <h3>This should be ... 3.2 </h3>
    </div>
</div>

＆＃13;

CSS计数器增量不适用于嵌套的div和h3元素

1 个答案: