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

Question

我试图使用CSS计数器制作带编号的标题，并且当所有标题都在同一个div中时它工作得很好，但是当我需要将计数器重置为后代div中的初始值并继续使用该计数器时在另一个div中的值，那么我有一个问题。

  

计数器的范围从文档中具有＆＃39;计数器重置＆＃39;的第一个元素开始。该计数器包括元素的后代及其后代的兄弟姐妹。

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

＆＃13;

＆＃13;

|-- an_example_pypi_project
|   |-- __init__.py
|   |-- useful_1.py
    |-- subfolder
|   |   |-- useful_2.py
|-- tests
|-- |-- __init__.py
|-- |-- runall.py
|-- |-- test0.py

＆＃13;

.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) " ";
}

＆＃13;

＆＃13;

＆＃13;

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

感谢。

Answer 1

更新的答案：

根据fiddle：

  

计数器是＆＃34;自嵌套＆＃34;，在某种意义上，重置后代元素或伪元素中的计数器会自动创建计数器的新实例。

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

所以你有两个选择：

一种。根本不要筑巢：

＆＃13;

＆＃13;

.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) " ";
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

.numbered:before { color: red; }

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

初步答复：

<击> 我假设你正在寻找这个？

＆＃13;

＆＃13;

.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) " ";
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

<击>