为嵌套列表插入 CSS 个父节计数器

Question

我有一个2级ul。我正在使用 counter-reset、counter-increment 和 content 来插入一个运行计数器。它的工作原理是 li 中的内容编号正确。

我有 a link 在第一层 li，在它的嵌套 ul 之后我想说 "Add To Rule [number of parent li]"。

下面是我正在做的最简单的工作示例。在alink中，它使用了第2层的计数器ul/li。

输出结果：

规则 1
- 规则 1.1
  ...
- 规则 1.2
  ...
- 规则 1.3
  ...
添加到规则 1.3
规则 2
- 规则 2.1
  ...
- 规则 2.2
  ...
- 规则 2.3
  ...
添加到规则 2.3
规则 3
- 规则 3.1
  ...
- 规则 3.2
  ...
- 规则 3.3
  ...
添加到规则 3.3

我正在努力实现的目标：

规则 1
- 规则 1.1
  ...
- 规则 1.2
  ...
- 规则 1.3
  ...
添加到规则 1
规则 2
- 规则 2.1
  ...
- 规则 2.2
  ...
- 规则 2.3
  ...
添加到规则 2
规则 3
- 规则 3.1
  ...
- 规则 3.2
  ...
- 规则 3.3
  ...
添加到规则 3

我不知道我需要做什么才能得到我的 expected/wanted 输出。

ul
{
  counter-reset: section;
}

li
{
  counter-increment: section;
}

.ruleNumber::after
{
  content: counters(section, ".");
}

a::after
{
  content: counters(section, ".");
}

<ul>
  <li>
    <span class="ruleNumber">Rule </span>
    <ul>
      <li>
        <span class="ruleNumber">Rule </span>
        <div class="rule">...</div>
      </li>
      <li>
        <span class="ruleNumber">Rule </span>
        <div class="rule">...</div>
      </li>
      <li>
        <span class="ruleNumber">Rule </span>
        <div class="rule">...</div>
      </li>
    </ul>
    <a href="#" onclick="">Add To Rule </a>
  </li>
  <li>
    <span class="ruleNumber">Rule </span>
    <ul>
      <li>
        <span class="ruleNumber">Rule </span>
        <div class="rule">...</div>
      </li>
      <li>
        <span class="ruleNumber">Rule </span>
        <div class="rule">...</div>
      </li>
      <li>
        <span class="ruleNumber">Rule </span>
        <div class="rule">...</div>
      </li>
    </ul>
    <a href="#" onclick="">Add To Rule </a>
  </li>
  <li>
    <span class="ruleNumber">Rule </span>
    <ul>
      <li>
        <span class="ruleNumber">Rule </span>
        <div class="rule">...</div>
      </li>
      <li>
        <span class="ruleNumber">Rule </span>
        <div class="rule">...</div>
      </li>
      <li>
        <span class="ruleNumber">Rule </span>
        <div class="rule">...</div>
      </li>
    </ul>
    <a href="#" onclick="">Add To Rule </a>
  </li>
</ul>

Answer 1

您可以使用两个单独的计数器 -- 一个用于部分，一个用于项目：

ul {
  counter-reset: section;
}

ul ul {
  counter-reset: item;
  counter-increment: section;
}

li {
  counter-increment: item;
}

.ruleNumber::after {
  content: counters(item, ".");
}

a::after {
  content: counters(section, ".");
}

<ul>
  <li>
    <span class="ruleNumber">Rule </span>
    <ul>
      <li>
        <span class="ruleNumber">Rule </span>
        <div class="rule">...</div>
      </li>
      <li>
        <span class="ruleNumber">Rule </span>
        <div class="rule">...</div>
      </li>
      <li>
        <span class="ruleNumber">Rule </span>
        <div class="rule">...</div>
      </li>
    </ul>
    <a href="#" onclick="">Add To Rule </a>
  </li>
  <li>
    <span class="ruleNumber">Rule </span>
    <ul>
      <li>
        <span class="ruleNumber">Rule </span>
        <div class="rule">...</div>
      </li>
      <li>
        <span class="ruleNumber">Rule </span>
        <div class="rule">...</div>
      </li>
      <li>
        <span class="ruleNumber">Rule </span>
        <div class="rule">...</div>
      </li>
    </ul>
    <a href="#" onclick="">Add To Rule </a>
  </li>
  <li>
    <span class="ruleNumber">Rule </span>
    <ul>
      <li>
        <span class="ruleNumber">Rule </span>
        <div class="rule">...</div>
      </li>
      <li>
        <span class="ruleNumber">Rule </span>
        <div class="rule">...</div>
      </li>
      <li>
        <span class="ruleNumber">Rule </span>
        <div class="rule">...</div>
      </li>
    </ul>
    <a href="#" onclick="">Add To Rule </a>
  </li>
</ul>

为嵌套列表插入 CSS 个父节计数器

Insert CSS parent section counter for nested lists

html

css

html-lists

css-counter