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

Question

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

我在第一级li中a链接，在其嵌套ul之后，我想说"添加到规则[父 li 的数量]"。

以下是我正在做的事情的最小工作示例。在a链接中，它正在使用第二级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

我不知道我需要做什么才能获得预期/想要的输出。

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>