CSS 计数器 - 不同 div 中的编号标题

Question

我正在尝试使用 CSS 计数器制作编号标题，并且当所有标题都在同一个 div 中时效果很好，但是当我需要将计数器重置为后代 div 中的初始值并从新值中继续使用该计数器时另一个div，那我就有问题了。

计数器的范围从文档中具有该计数器的“计数器重置”的第一个元素开始，并包括该元素的后代及其后续兄弟姐妹及其后代。

因此，我假设当我通过某个标题重置计数器时，只会为该标题所在的 div 及其后代设置新的计数器。所以在下一个 div 中没有设置计数器，并且从头开始计数。解决方案可能不是重置计数器，而是将计数器设置为初始值。但我还没有找到办法做到这一点。有可能吗？或者我必须使用 javascript 来以这种方式使用编号标题？还是有其他解决方案？

.text-container {
    counter-reset: section sub-section composite;
    h1.numbered {
        counter-reset: sub-section;
    }
    h2.numbered {
        counter-reset: composite;
    }
}

h1.numbered:before {
    counter-increment: section;
    content: counter(section) " ";
}
h2.numbered:before {
    counter-increment: sub-section;
    content: counter(section) "." counter(sub-section) " ";
}
h3.numbered:before {
    counter-increment: composite;
    content: counter(section) "." counter(sub-section) "." counter(composite) " ";
}

<div class="text-container">
  <div class="text-section">
    <div class="text-section-column">
      <h1 class="numbered">result 1 Heading</h1>
      <h2 class="numbered">result 1.1 Heading</h2>
    </div>
    <div class="text-section-column">
      <h3 class="numbered">result 1.1.1 Heading</h3>
      <h2 class="numbered">result 1.2 Heading</h2>
      <h3 class="numbered">result 1.2.1 Heading</h3>
    </div>
  </div>
  <div class="text-section">
    <div class="text-section-column">
      <h3 class="numbered">result 1.2.1 Heading (expected 1.2.2)</h3>
    </div>
  </div>
</div>

在第三个 .text-section-column 中，我想从最后一个值继续计数，但设置了新的计数器。

谢谢。

Answer 1

更新答案：

根据spec：

计数器是“自嵌套”的，从某种意义上说，重置后代元素或伪元素中的计数器会自动创建计数器的新实例。

...，这意味着嵌套会影响您的任意嵌套计数器。

所以你有两个选择：

A.根本不筑巢：

.numbered:before { color: red; }

.text-container {
    counter-reset: a b 1 c;
}

h1.numbered {
  counter-increment: a;
  counter-reset: b;
}
h2.numbered {
  counter-increment: b;
  counter-reset: c;
}
h3.numbered {
  counter-increment: c;
}
h1.numbered:before {
  content: counter(a) " ";
}
h2.numbered:before {
    content: counter(a) "." counter(b) " ";
}
h3.numbered:before {
    content: counter(a) "." counter(b) "." counter(c) " ";
}

<div class="text-container">
  <div class="text-section">
    <div class="text-section-column">
      <h1 class="numbered">result 1 Heading</h1>
      <h2 class="numbered">result 1.1 Heading</h2>
      <h3 class="numbered">result 1.1.1 Heading</h3>
      <h2 class="numbered">result 1.2 Heading</h2>
      <h3 class="numbered">result 1.2.1 Heading</h3>
      <h3 class="numbered">result <strike>1.2.1</strike> 1.2.2 Heading (expected 1.2.2)</h3>
    </div>
  </div>
</div>

B.或者，如果您嵌套，请正确执行：

.numbered:before { color: red; }

.item {
 counter-increment: item; 
}
.item > .item {
  counter-reset: item;
}
.item ~ .item {
  counter-reset: none;
}
.item .numbered::before {
   content: counters(item, ".") " ";
}

<div class="text-container">
  <div class="item">
    <h1 class="numbered">result 1 Heading</h1>
    <div class="item">
      <h2 class="numbered">result 1.1 Heading</h2>
      <div class="item">
        <h3 class="numbered">result 1.1.1 Heading</h3>
      </div>
      <div class="item">
        <h3 class="numbered">result 1.1.2 Heading</h3>
      </div>
    </div>
    <div class="item">
      <h2 class="numbered">result 1.2 Heading</h2>
      <div class="item">
        <h3 class="numbered">result 1.2.1 Heading</h3>
      </div>
      <div class="item">
        <h3 class="numbered">result <strike>1.2.1</strike> 1.2.2 Heading (expected 1.2.2)</h3>
      </div>
    </div>
  </div>
</div>

---

初步回答：

我假设您正在寻找这个？

.numbered:before { color: red; }

.text-container {
    counter-reset: a b 1 c;
}

h1.numbered {
  counter-increment: a;
  counter-reset: b;
}
h2.numbered {
  counter-increment: b;
  counter-reset: c;
}
h3.numbered {
  counter-increment: c;
}
h1.numbered:before {
  content: counter(a) " ";
}
h2.numbered:before {
    content: counter(a) "." counter(b) " ";
}
h3.numbered:before {
    content: counter(a) "." counter(b) "." counter(c) " ";
}

<div class="text-container">
  <div class="text-section">
    <div class="text-section-column">
      <h1 class="numbered">result 1 Heading</h1>
      <h2 class="numbered">result 1.1 Heading</h2>
    </div>
    <div class="text-section-column">
      <h3 class="numbered">result 1.1.1 Heading</h3>
      <h2 class="numbered">result 1.2 Heading</h2>
      <h3 class="numbered">result 1.2.1 Heading</h3>
    </div>
  </div>
  <div class="text-section">
    <div class="text-section-column">
      <h3 class="numbered">result <strike>1.2.1</strike> 1.2.2 Heading (expected 1.2.2)</h3>
    </div>
  </div>
</div>