body {counter-reset: h1}
h1 {counter-reset: h2}
h2 {counter-reset: h3}

h1:before {counter-increment: h1; content: counter(h1) ". "}
h2:before {counter-increment: h2; content: counter(h1) "." counter(h2) ". "}
h3:before {counter-increment: h3; content: counter(h1) "." counter(h2) "." counter(h3) ". "}

<div class="varies">
    <h1>Lorem ipsum dolor sit amet,consectetur adipiscing elit.</h1>
</div>
<p>Morbi efficitur nibh metus,a vehicula mauris tristique ac. Duis ornare metus eget iaculis hendrerit.</p>
  <h2>Morbi nisi lacus,ultricies sit amet turpis a,aliquet congue nulla.</h2>
        <p>Duis eget facilisis nisl.</p>
    <h3>Donec tincidunt purus quam,ut accumsan lorem hendrerit a.</h3>
      <p>Aenean in mattis quam.</p>
    <h3>Maecenas a nulla sit amet ligula facilisis tincidunt lacinia non enim.</h3>
      <p>Aliquam dignissim turpis placerat,facilisis magna et,venenatis purus.</p>
  <h2>Suspendisse tempus eu elit nec malesuada.</h2>
        <p>In ut sollicitudin nisi. Praesent non porttitor ante,molestie scelerisque mauris.</p>
  <h2>Vivamus eu turpis efficitur,ornare risus in,consectetur tellus.</h2>
        <p>Cras pellentesque orci eu placerat mollis.</p>      
<h1>Duis eu nulla et tellus porttitor auctor.</h1>

解决方法@H_403_8@

可以通过看看 W3C specs关于创建计数器,其范围和继承的内容来详细解释行为的原因.

Counter Reset: The counter-reset property creates new counters on an element.

Scope of a Counter: The scope of a counter starts at the first element in the document that has a ‘counter-reset’ for that counter.

Counter Inheritance: A counter and its value are inherited separately,possibly from different elements. If an element has a prevIoUs sibling,it must inherit all of the sibling’s counters. Otherwise,if the element has a parent,it must inherit all of the parent’s counters. Otherwise,the element must have an empty set of counters. The element then inherits counter values from the immediately preceding element in document order.

为什么没有div的代码段工作？

在工作片段(没有div的人)中,发生了以下情况：

> counter.h1(添加一个前缀来区分元素)在body上创建(或重置),其初始值设置为0.
>所有元素都会继承父代的计数器,所以body中的每一个元素都会得到counter.h1.当遇到第一个h1时,counter.h1的值增加到1.当遇到下一个h1时,它继承前一个元素的计数器值,然后递增到2.
> counter.h2计数器在h1元素中创建,值设置为0.该值对于h1的兄弟节点是可见的,它们都可以继承它.
>在这个代码片段中,所有h2元素实际上是h1元素的兄弟,所以每个h2元素都继承了已经在h1创建的counter.h2,并且只增加其值.所以,当第一个h2遇到counter.h2变为1等等.
>与h2元素类似,h3元素也是h1和h2元素的兄弟,因此它们也继承了counter.h1和counter.h2.这就是为什么这个样本中编号保持正确的原因.

body {counter-reset: h1}
h1 {counter-reset: h2}
h2 {counter-reset: h3}
h1:before {counter-increment: h1; content: counter(h1)". "}
h2:before {counter-increment: h2; content: counter(h1)"." counter(h2)". "}
h3:before {counter-increment: h3; content: counter(h1)"." counter(h2)"." counter(h3)". "}

<!-- body creates counter.h1 and set to 0 -->
<h1>Heading 1 <!-- Inherits counter.h1 from parent,creates counter.h2 and set to 0 -->
  <!-- ::before being a child inherits all counters from parent,increments counter.h1 to 1 and displays value -->
</h1>
<p>Paragraph</p>
<h2>Heading 2 <!-- Inherits counter.h1,counter.h2 from sibling,creates counter.h3 and set to 0 -->
  <!-- ::before being a child inherits all counters from parent,increments counter.h2 to 1 and displays value -->
</h2>
<p>Paragraph</p>
<h3>Heading 3 <!-- Inherits counter.h1,counter.h2,counter.h3 -->
  <!-- ::before being a child inherits all counters from parent,increments counter.h3 to 1 and displays value -->
</h3>
<p>Paragraph</p>
<h3>2nd Heading 3 <!-- Inherits counter.h1,increments counter.h3 to 2 and displays value -->  
</h3>
<p>Paragraph</p>
<h2>2nd Heading 2 <!-- Inherits counter.h1,counter.h3,resets counter.h3 to 0 -->
  <!-- ::before being a child inherits all counters from parent,increments counter.h2 to 2 and displays value -->
</h2>
<p>Paragraph</p>
<h2>3rd Heading 2 <!-- Inherits counter.h1,increments counter.h2 to 3 and displays value -->
</h2>
<p>Paragraph</p>
<h1>2nd Heading 1 <!-- Inherits counter.h1,resets counter.h2 to 0 -->
  <!-- ::before being a child inherits all counters from parent,increments counter.h1 to 2 and displays value -->
</h1>

为什么div的片段不起作用？

现在让我们来看看那个不起作用的片段(h1在div里面).

>这里,h1创建counter.h2,但这只能由h1的兄弟姐妹继承(其中没有).
>无论何时遇到h2元素,UA都会尝试在…之前递增counter.h2的值.但是这里的h2父对象并没有继承counter.h2,因此h2：之前也没有.因为这个h2：之前会创建自己的counter.h2并增加到1.
>后续h2元素也不能继承counter.h2,因为计数器是由h2：before(这是h2的子代)创建的.因此,每次遇到h2时,都会在其之前创建一个新的计数器：before和incremented.这就是为什么所有h2都显示为1.1.
>同样地,没有一个h3元素知道counter.h2,它们也不会增加,这就是为什么它们显示为1.0.x.
>但是,它们都可以继承counter.h3,因为它是由h2元素创建的,它是所有h3元素的兄弟.这就是为什么counter.h3正确递增.

body {counter-reset: h1}
h1 {counter-reset: h2}
h2 {counter-reset: h3}
h1:before {counter-increment: h1; content: counter(h1)". "}
h2:before {counter-increment: h2; content: counter(h1)"." counter(h2)". "}
h3:before {counter-increment: h3; content: counter(h1)"." counter(h2)"." counter(h3)". "}

<!-- body creates counter.h1,sets it to 0 -->
<div class="test"> <!-- Inherits counter.h1 from parent -->
  <h1>Heading 1 <!-- Again inherits counter.h1 from parent,creates counter.h2 -->
    <!-- ::before increments counter.h1 to 1 and display value-->
  </h1>
</div>
<p>Paragraph</p>
<h2>Heading 2 <!-- Inherits counter.h1 as it is from parent but not counter.h2,creates counter.h3 -->
  <!-- ::before has no counter.h2,so creates a counter.h2 and increments to 1 -->
</h2>
<p>Paragraph</p>
<h3>Heading 3 <!-- Inherits counter.h1 as it is from parent,couunter.h3 from sibling but not counter.h2 -->
  <!-- ::before inherits counter.h3 from parent and increments to 1,has no counter.h2 so creates a new counter.h2 and sets to 0 -->
</h3>
<p>Paragraph</p>
<h3>2nd Heading 3 <!-- Inherits counter.h1 as it is from parent,couunter.h3 from sibling but not counter.h2 -->
  <!-- ::before inherits counter.h3 from parent and increments to 2,has no counter.h2 so creates a new counter.h2 and sets to 0 -->
</h3>
<p>Paragraph</p>
<h2>2nd Heading 2 <!-- Inherits counter.h1 as it is from parent,couunter.h3 from sibling but not counter.h2,resets counter.h3 to 0 -->
  <!-- ::before has no counter.h2,so creates a counter.h2 and increments to 1 -->
</h2>
<p>Paragraph</p>
<h2>3rd Heading 2 <!-- Inherits counter.h1 as it is from parent,so creates a counter.h2 and increments to 1 -->
</h2>
<p>Paragraph</p>
<h1>2nd Heading 1 <!-- Inherits counter.h1 as it is from parent,resets counter.h2 to 0 -->
  <!-- ::before inherits counter.h1 from parent and increments to 2 -->
</h1>

解决办法是什么？

这个问题的理想解决方案是首先在身体本身重置所有3个计数器,以便所有元素都知道计数器的存在,并可以继承或使用它的值.

body {counter-reset: h1 h2 h3}
h1 {counter-reset: h2 h3}
h2 {counter-reset: h3}
h1:before {counter-increment: h1; content: counter(h1)". "}
h2:before {counter-increment: h2; content: counter(h1)"." counter(h2)". "}
h3:before {counter-increment: h3; content: counter(h1)"." counter(h2)"." counter(h3)". "}

<!-- body creates counter.h1,counter.h3 sets all 0 -->
<div class="test"> <!-- Inherits all 3 counters -->
  <h1>Heading 1 <!-- Inherits all 3 counters,resets counter.h2 and counter.h3 to 0 -->
    <!-- ::before also inherits all 3 counters,increments counter.h1 to 1 and displays value -->
  </h1>
</div>
<p>Paragraph</p>
<h2>Heading 2 <!-- Inherits all 3 counters,resets counter.h3 to 0 -->
  <!-- ::before also inherits all 3 counters,increments counter.h2 to 1 and displays value -->
</h2>
<p>Paragraph</p>
<h3>Heading 3 <!-- Inherits all 3 counters -->
  <!-- ::before also inherits all 3 counters,increments counter.h3 to 1 and displays value -->
</h3>
<p>Paragraph</p>
<h3>2nd Heading 3 <!-- Inherits all 3 counters -->
  <!-- ::before also inherits all 3 counters,increments counter.h3 to 2 and displays value -->
</h3>
<p>Paragraph</p>
<h2>2nd Heading 2 <!-- Inherits all 3 counters,increments counter.h2 to 2,resets counter.h3 to 0 and displays value -->
</h2>
<p>Paragraph</p>
<h2>3rd Heading 2 <!-- Inherits all 3 counters,increments counter.h2 to 3,resets counter.h3 to 0 and displays value -->
</h2>
<p>Paragraph</p>
<h1>2nd Heading 1 <!-- Inherits all 3 counters,resets counter.h2 and counter.h3 to 0 -->
  <!-- ::before also inherits all 3 counters,increments counter.h1 to 2,resets counter.h2,counter.h3 to 0 and displays value -->
</h1>