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

Question

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

我在a的嵌套li后的第一级ul中链接，我想说“添加到规则[parent 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>