Question

当内容不是“真正”嵌套时，我正在尝试实现CSS自动编号。我的情况来自PDF生成，其中涉及将几个html页面全部合并在一起（一个页面接一个页面），因此内容不是真正嵌套的，每个页面都将附加到新的div中。

我所面临的情况类似于以下示例（也创建了fiddle）

body {
  counter-reset: h1 h2 h3;
}

h1,
h2,
h3 {
  color: green;
}

h1::before,
h2::before,
h3::before {
  color: black;
}

h3::before {
  color: red;
}

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>
  <div>
    <h1>1</h1>
    <h2>1.1</h2>
  </div>
  <div>
    <h3>1.1.1</h3>
  </div>
  <div>
    <h2>1.2</h2>
  </div>
  <div>
    <h3>1.2.1</h3>
  </div>
</body>

没有嵌套部分的CSS自动编号

0 个答案: