HTML हेडिंग नंबरिंग अनपेक्षित रूप से रीसेट हो जाती है

h1 {
  counter-increment: h1counter;
  counter-reset: h2counter;
}
h1::before {
  content: counter(h1counter) ".\0000a0\0000a0";
}
h2::before {
  counter-increment: h2counter;
  content: counter(h1counter) "." counter(h2counter) ".\0000a0\0000a0";
}

<h1>Section 1</h1>
<h2>Subsection 1</h2>
<h2>Subsection 2</h2>
<h1>Section 2</h1>
<h2>Subsection 1</h2>
<h2>Subsection 2</h2>
<h1>Section 3</h1>
<h2>Subsection 1</h2>
<h2>Subsection 2</h2>

<button aria-pressed="false">
 reset-on-body
 <style media="none">
  body { counter-reset: list-item; }
 </style>
</button>

<div> 
 <button aria-pressed="false">
  reset on div:
  <style media="none">
   div { counter-reset: list-item 11; }
  </style>
 </button>
 <p>
  <button aria-pressed="false">
   reset to 11:
   <style media="none">
    div > p { counter-reset: list-item 11; }
   </style>
  </button>
  <button aria-pressed="false">
   set to 12:
   <style media="none">
    div > p { counter-set: list-item 12; }
   </style>
  </button>
 </p>
</div>

<p>P before OL</p>

<ol>
 <li>
  <button aria-pressed="false">
   Disable native ol reset:
   <style media="none">
    ol { counter-reset: none; }
   </style>
  </button> OL
 <li>bar
  <ol>
   <li>baz
   <li>gazonk
   </ol>
 <li>qux
</ol>

<p>P next to OL</p>

<script>
[...document.querySelectorAll('button')].forEach(b=>{
 var a = 'aria-pressed'
 b.onclick = function() {
  var to = this.getAttribute(a) !== 'true';
  this.setAttribute(a,String(to));
  this.firstElementChild.setAttribute('media',to?'all':'none')
 }
})
</script>

<style>
:root { background: dimgray; color: snow; }
:link { color: aqua; } :visited { color: lime; }

body, div, p, ol {
 padding: .2em 2em; 
 outline: 1px dashed;
}

p::after {
 content: ' // list-item: ' counter(list-item);
 display: block;
}

style[media] {
 display: block; font-family: monospace;
 margin-bottom: .3em;
}

[aria-pressed="false"]::before { content: '☐ ' }
[aria-pressed="true"]::before { content: '☒ ' }
[aria-pressed="true"] { outline: solid; }

::marker, p::after { outline: solid; }
</style>