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

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

从规格：

计数器的范围从文档中的第一个元素开始，该元素具有该计数器的“反复位”，并包含元素的后代及其后代的兄弟。

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

您可以按照预期的方式使用此工作，而不是重置div的第一个子节点上的计数器：

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

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

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

 <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>

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

问题描述

1 个解决方案

解决方案1
3 已采纳 2015-04-08 20:54:10

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

问题描述

1 个解决方案

解决方案1 3 已采纳 2015-04-08 20:54:10

解决方案1
3 已采纳 2015-04-08 20:54:10