Question

我正努力在CSS中找到一种方法......

    ol.content {
  counter-reset: item 1;
  list-style: none;
}

li.content:before {
  counter-increment: item;
  content: counter(item)". ";
}

ol.content ol.content li.content:before {
  counter-increment: item;
  content: counters(item, ".") " ";
}

<p><span style="font-size: 24px;">On this page:</span></p>

<ol class="content">
  <li class="content"><a href="#">section TWO</a>

    <ol class="content">
      <li class="content"><a href="#section2-1">TWO point *ONE* (not 2.2!)</a></li>
      <li class="content"><a href="#section2-2">TWO point *TWO*</a></li>
      <li class="content"><a href="#section2-3">TWO point *THREE*</a></li>
      <li class="content"><a href="#section2-4">TWO point *FOUR*</a>

        <ol class="content">
          <li class="content">TWO point *FOUR* point *ONE* (not 2.5.2!)</li>
          <li class="content">Title...</li>
          <li class="content">Title...</li>
          <li class="content">Title...</li>
          <li class="content">Title...</li>
        </ol>
      </li>
      <li class="content"><a href="#section2-5">TWO point *FIVE*</a></li>
    </ol>
  </li>
</ol>

...首先以不是一个的数字（即上面的小提琴中的第2部分）开始一个父计数器序列，但是嵌套列表实际上是从.1开始的。我不擅长CSS，所以我可能会想到一些简单的东西。在上面的小提琴中，您会看到HTML显示不正确......

2

2 2

2.3

2.4

2.5

2.5。的 2

当我需要......

2

2的 1

2.3

2.4

2的 4.1

我肯定需要能够从初始/父母的任何数字开始，所以我假设我将不得不使用反复位：项目1;，反复位：项目2;，计数器重置：项目4;等某处，但是我需要启动嵌套列表应该重置为从1开始。

Answer 1

您正在将计数器重置为1：

ol.content {
  counter-reset: item 1;
  list-style: none;
}

如果为嵌套列表将其重置为0，则按预期工作：

ol.content ol.content {
  counter-reset: item 0;
}

https://jsfiddle.net/Lh0kLvj7/3/

Answer 2

您可以为第二级菜单重新分配counter-reset，如下所示。

 ol.content ol.content {
    counter-reset: item;
    list-style: none;
 }

代码段

＆＃13;

ol.content {
  counter-reset: item 1;
  list-style: none;
}

li.content:before {
  counter-increment: item;
  content: counter(item)". ";
}
ol.content ol.content {
  counter-reset: item;
  list-style: none;
}

ol.content ol.content li.content:before {
  counter-increment: item;
  content: counters(item, ".") " ";
}

＆＃13;

<p><span style="font-size: 24px;">On this page:</span></p>

<ol class="content">
  <li class="content"><a href="#">section TWO</a>

    <ol class="content">
      <li class="content"><a href="#section2-1">TWO point *ONE* (not 2.2!)</a></li>
      <li class="content"><a href="#section2-2">TWO point *TWO*</a></li>
      <li class="content"><a href="#section2-3">TWO point *THREE*</a></li>
      <li class="content"><a href="#section2-4">TWO point *FOUR*</a>

        <ol class="content">
          <li class="content">TWO point *FOUR* point *ONE* (not 2.5.2!)</li>
          <li class="content">Title...</li>
          <li class="content">Title...</li>
          <li class="content">Title...</li>
          <li class="content">Title...</li>
        </ol>
      </li>
      <li class="content"><a href="#section2-5">TWO point *FIVE*</a></li>
    </ol>
  </li>
</ol>

＆＃13;

Answer 3

不确定为什么你到处都在使用“.content”类......但无论如何，最简单的方法是在OL标签上使用订单类

ol {
  list-style: none;
}

.f-o{
 counter-reset: f-o 1; 
/*initialized at 1 for demonstration purposes, you might want to start from zero*/
}

.s-o{
 counter-reset: s-o; 
}

.t-o{
  counter-reset:t-o;
}

.f-o li:before {
  content: counter(f-o)". ";
  counter-increment: f-o;

}

.s-o li:before {
  content: counter(f-o) "." counter(s-o)". ";
  counter-increment: s-o;
}

.t-o li:before {
  content: counter(f-o) "." counter(s-o)". " counter(t-o)". ";
  counter-increment: t-o;
}

<ol class="f-o">
  <li><a href="#">section TWO</a>

    <ol class="s-o">
      <li><a href="#section2-1">TWO point *ONE* (not 2.2!)</a></li>
      <li><a href="#section2-2">TWO point *TWO*</a></li>
      <li><a href="#section2-3">TWO point *THREE*</a></li>
      <li><a href="#section2-4">TWO point *FOUR*</a>

        <ol class="t-o">
          <li>TWO point *FOUR* point *ONE* (not 2.5.2!)</li>
          <li>Title...</li>
          <li>Title...</li>
          <li>Title...</li>
          <li>Title...</li>
        </ol>
      </li>
      <li><a href="#section2-5">TWO point *FIVE*</a></li>
      </ol>
  </li>
</ol>

并将重置附加到他们

Answer 4

解决方案是使用反重置属性。

 ol.content ol.content {
   counter-reset: item 0;
 }

counter-reset属性指定为以下任一项：

custom-ident 命名计数器，后跟整数。您可以根据需要指定要重置的计数器，每个名称或名称 - 数字对用空格分隔。

关键字值无。

访问https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters

重新设置格式为1.1,1.2，

4 个答案: