我如何停止 <div>标签干扰计数器多级标题? [英] How do I stop <div> tags interfering with counters multiple levels of headings?

问题描述

这是我如何停止<的扩展div>标签干扰计数器?

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

body {计数器复位:h1 h2 h3 h4；}h1{计数器重置:h2 h3 h4；}h2{计数器重置:h3 h4；}h3{计数器复位:h4；}h1:之前{反增量:h1；内容:计数器(h1)"；}h2:之前{反增量:h2；内容:计数器(h1)."计数器(h2)"；}h3:之前{反增量:h3；内容:counter(h1)"."counter(h2)"."counter(h3)"";}h4:之前{反增量:h4；内容:counter(h1)"."counter(h2)"."counter(h3)"."counter(h4)"";}div:之前{内容:counter(h1)"."counter(h2)"."counter(h3)"."counter(h4)"";}

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

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

从上面的截图可以看出，并不是所有的计数器都是在 div 之间继承的.有没有办法解决这个问题?

解决方案

我的解决方案:

替换:

h1{counter-reset: h2 h3 h4;}h2{计数器重置:h3 h4;}h3{计数器重置:h4;}

与

h1{counter-reset: h2 initial h3 initial h4 initial;}h2{counter-reset: h3 initial h4 initial;}h3{计数器重置:h4初始；}

body {计数器复位:h1 h2 h3 h4；}h1{计数器重置:h2 初始 h3 初始 h4 初始；}h2{计数器重置:h3 初始 h4 初始；}h3{计数器重置:h4初始；}h1:之前{反增量:h1；内容:计数器(h1)"；}h2:之前{反增量:h2；内容:计数器(h1)."计数器(h2)"；}h3:之前{反增量:h3；内容:counter(h1)"."counter(h2)"."counter(h3)"";}h4:之前{反增量:h4；内容:counter(h1)"."counter(h2)"."counter(h3)"."counter(h4)"";}div:之前{内容:counter(h1)"."counter(h2)"."counter(h3)"."counter(h4)"";}

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

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

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?

解决方案

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>

这篇关于我如何停止 &lt;div&gt;标签干扰计数器多级标题?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！