Вставить CSS счетчик родительского раздела для вложенных списков

Question

У меня 2 уровня ul. Я использую counter-reset, counter-increment и content для вставки счетчика хода. Это работает в том, что содержимое в li s нумеруется правильно.

У меня есть и a ссылка на первом уровне li, после его вложенного ul, который я хочу сказать "Добавить Правило [число родителей li] ".

Ниже приведен минимальный рабочий пример того, что я делаю. В ссылке a используется счетчик для 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

Я не могу понять, что мне нужно сделать, чтобы получить ожидаемый / желаемый результат.

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>