如何阻止 <div> 标签干扰计数器的多级标题？答案

【问题标题】：How do I stop <div> tags interfering with counters multiple levels of headings?如何阻止 <div> 标签干扰计数器的多级标题？
【发布时间】：2017-01-16 10:35:54
【问题描述】：

这是How do I stop <div> tags interfering with counters?的扩展

接受的答案解决了一级标题的问题（即问题中的 H1），但如果有多个级别的标题（见下文），则不能解决

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>

从上面的片段可以看出，并不是所有的计数器都是在 div 之间继承的。有没有办法来解决这个问题？

【问题讨论】：

标签： html css css-counter

【解决方案1】：

我的解决方案：

替换：

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

与

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>

【讨论】：

没有反对您的回答，您似乎已经发现（我认为是一个）错误，并且您也有解决方案，所以我为您的努力 +1。但是，您可以看到第一个 div 中的最后一个 h4 元素即使在有问题的 sn-p 中也会输出正确的计数器值，因此根据规范，下一个 div 也应该正确继承这些值（因为h4 是文档顺序中紧接在前面的元素）。这种继承似乎失败了，而且效果正在进一步向下传播。
@Harry。在确定 文档顺序中的紧邻元素 时，这些元素不是同级元素是否重要？（在 sn-p 中，hX 元素都是 div 元素的子元素）。我同意这可能是一个错误，因为div 中的第一个计数器被正确传递。
是的@Marked。他们不必是兄弟姐妹。我是从W3C Spec 拿来的。在示例 17 中，它说 但是，不是从“foo”和计数器继承值 1，而是从“bar”（文档顺序中的前一个元素）继承值 2。即使 'baz' 不是 'bar' 的兄弟。