How do I stop <div> tags interfering with counters multiple levels of headings?

问题

This is an expansion of How do I stop <div> tags interfering with counters?

The accepted answer solves the problem for one level of headings (ie H1 in the question) but not if there are multiple levels of headings (see below)

body {
  counter-reset: h1 h2 h3 h4;
}
h1 {
  counter-reset: h2 h3 h4;
}
h2 {
  counter-reset: h3 h4;
}
h3 {
  counter-reset: h4;
}
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)"  ";
}
h4:before {
  counter-increment: h4;
  content: counter(h1)"."counter(h2)"."counter(h3)"."counter(h4)"  ";
}
div:before {
  content: counter(h1)"."counter(h2)"."counter(h3)"."counter(h4)"  ";
}

<div>
  div
  <h1>H1</h1>
  <h2>H2</h2> 
  <h3>H3</h3>
  <h4>H4</h4>
  <h4>H4</h4>
  <h4>H4</h4>
</div>
<div>
  div
  <h4>H4</h4>
  <h4>H4</h4>

</div>
<div>
  div
  <h3>T1</h3>
  <h3>T1</h3>	
</div>

As can be seen from the above snipped not all the counters are inherited between the divs. Is There a way to fix this?

回答1:

My solution:

replace:

h1{counter-reset: h2 h3 h4;}
h2{counter-reset: h3 h4;}
h3{counter-reset: h4;}

with

h1{counter-reset: h2 initial h3 initial h4 initial;}
h2{counter-reset: h3 initial h4 initial;}
h3{counter-reset: h4 initial;}

body {
  counter-reset: h1 h2 h3 h4;
}
h1 {
  counter-reset: h2 initial h3 initial h4 initial;
}
h2 {
  counter-reset: h3 initial h4 initial;
}
h3 {
  counter-reset: h4 initial;
}
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)"  ";
}
h4:before {
  counter-increment: h4;
  content: counter(h1)"."counter(h2)"."counter(h3)"."counter(h4)"  ";
}
div:before {
  content: counter(h1)"."counter(h2)"."counter(h3)"."counter(h4)"  ";
}

<div>
  div
  <h1>H1</h1>
  <h2>H2</h2> 
  <h3>H3</h3>
  <h4>H4</h4>
  <h4>H4</h4>
  <h4>H4</h4>
</div>
<div>
  div
  <h4>H4</h4>
  <h4>H4</h4>

</div>
<div>
  div
  <h3>T1</h3>
  <h3>T1</h3>	
</div>

来源：https://stackoverflow.com/questions/41674396/how-do-i-stop-div-tags-interfering-with-counters-multiple-levels-of-headings