Question

我使用嵌套计数器创建一个html有序列表。

这是我的代码：

我期待这个输出

0. zero
  0.1 zero.one
1. one
  1.1. one.one
  1.2. one.two
  1.3. one.three
2. two
  2.1 two.one
  2.2 two.two
    2.2.1 two.two.one
    2.2.2 two.two.two
3. three

但我得到了这个：

0. zero
  0.0 zero.one
1. one
  1.0 one.one
  1.1 one.two
  1.2 one.three
2. two
  2.0 two.one
  2.1 two.two
    2.1.0 two.two.one
    2.2.1 two.two.two
3. three

我想从一个0索引开始，但我希望子列表索引从1开始。我唯一的想法是使用两个计数器，但我还不熟悉高级CSS，我不知道如何管理它们：（

全部谢谢！

Answer 1

要获得JS Fiddle上示例的正确数字，请将counter-reset更改为第0项;

CSS

OL {
    counter-reset: item 0;
    padding-left: 10p;
}

LI { 
    display: block
}

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

你的OL必须在你的LI里面，你不能在OL里面有一个OL

HTML：

<body>
    <ol>
        <li>one</li>
        <li>two
            <ol>
                <li>two.one</li>
                <li>two.two</li>
                <li>two.three</li>
            </ol>
        </li>
        <li>three
            <ol>
                <li>three.one</li>
                <li>three.two
                    <ol>
                        <li>three.two.one</li>
                        <li>three.two.two</li>
                    </ol>
                </li>
            </ol>
        </li>
        <li>four</li>
    </ol>
</body>

Answer 2

您的代码中存在2个问题。第一个是非常严重的。 HTML代码实际上是无效的。 ol只能包含li元素作为直接子元素。但您添加了ol个元素作为ol的直接子元素。您必须将ol元素包装在li元素中。第二个问题是你要求的问题。为了实现您的目标，我们可以为最外面的counter-reset和其他ol设置不同的ol：

<强> HTML ：

 <ol id='list'>
  <li>one</li>
  <li>two  
   <ol>
    <li>two.one</li>
    <li>two.two</li>
    <li>two.three</li>
   </ol>
  </li>
  <li>three</li>  
  <li>four 
   <ol>
    <li>four.one</li>
    <li>four.two
        <ol>
          <li>four.two.one</li>
          <li>four.two.two</li>
        </ol>
    </li>          
   </ol>
  </li>
  <li>five</li>
</ol>

<强> CSS ：

#list { 
  counter-reset: item -1;
}
ol {
  counter-reset: item; 
  padding-left: 10px;  
}
LI { display: block }
LI:before { 
  content: counters(item, ".") " "; 
  counter-increment: item;
}

Demo 1

不使用最id的{{1}}，您可以执行以下操作：

ol

Demo 2

这是另一种方法：

ol { 
  counter-reset: item -1;
}
ol ol {
  counter-reset: item; 
  padding-left: 10px;  
}
LI { display: block }
LI:before { 
  content: counters(item, ".") " "; 
  counter-increment: item;
}

Demo 3

Answer 3

不，不，你的HTML（小提琴）坏了。正如您在标题中提到的，<ol>应该嵌套，这意味着内部其他li，就像这样

<ol>
  <li>Two
    <ol>
      <li>Two.one</li>
    </ol>
  </li>
</ol>

此刻，你的朋友是你其他朋友的直接孩子。 Ol可能只有li作为孩子（或脚本标签）。所以现在你有这个。

<ol>
   <li>Two</li>
   <ol>
      <li>Two.one</li>
   </ol>
</ol>

当您将其更改为此答案中的第一个代码块时，您可以为嵌套的li应用不同的CSS，如下所示：

ol { counter-reset: item -1 }
ol li ol  { counter-reset: item 0 }

在这里演示：http://jsfiddle.net/kevinvanlierde/YpgfF/1/

Answer 4

编辑Tyblitz HTML结构 ..但没有显示正确的结果。

<body>
 <ol>
  <li>zero</li>
  <li>one
      <ol>
       <li>one.one</li>
       <li>one.two</li>
       <li>one.three</li>
      </ol>
  </li>
  <li>two
      <ol>
       <li>two.one</li>
       <li>two.two
            <ol>
             <li>two.two.one</li>
             <li>two.two.two</li>
            </ol>
        </li>
       </ol>
     </li>
  <li>three</li>
  </ol>
 </body>

<强> CSS

OL { counter-reset: item -1; padding-left: 10px;  }
ol li ol { counter-reset: item 0; }
LI { display: block }
LI:before { content: counters(item, ".") " "; counter-increment: item }

具有不同启动计数器的嵌套有序列表

4 个答案:

Demo 1

Demo 2

Demo 3

JSFiddel