时间戳

首页 > 解决方案 > 为嵌套列表插入 CSS 父节计数器

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

问题描述

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

我a在第一级有链接li，在它嵌套之后ul我想说“添加到规则[父李数]”。

下面是我正在做的最小工作示例。在a链接中，它使用第二级ul/的计数器li。

它输出什么：

我正在努力实现的目标：

我无法弄清楚我需要做什么才能获得预期/想要的输出。

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>

标签： htmlcsshtml-listscss-counter

解决方案

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

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>

推荐阅读