HTML/CSS嵌套的有序列表

Question

-我正在尝试创建一个子子子有序列表的CSS。

-我还想为每个子列表缩进。

-如何为每个标题（例如1,2和3）制定样式？

HTML

<ol>
  <li>Item
      <ol>
          <li>Item</li>
          <li>Item</li>
      </ol>
  </li>

  <li>Item          
       <ol>
          <li>Item</li>
          <li>Item
            <ol>
              <li>Item</li>
              <li>Item</li>
            </ol></li>
          <li>Item</li>
          <li>Item</li>
       </ol>
   </li>

   <li>item</li>
</ol>

需要实现的输出结果

1. Item
    1.1 Item
    2.2 Item

2. Item
    2.1 Item
    2.2 Item
      2.2.1 Item
      2.2.2 Item
    2.3 Item
    2.4 Item

3. Item

CSS

这是我目前的了解：

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

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

- Carl

---

你应该在更新标题下更新问题。根据当前的问题，我发布的答案似乎不合适。 - Nikhil Aggarwal

Answer 1

将您的CSS更新为以下内容：

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

For reference - http://jsfiddle.net/f3adtsmb/

- Nikhil Aggarwal

---

非常感谢！我尝试给你点赞作为一条有用的回答，但是我还没有获得足够的积分！ - Carl

太好了，它对你起作用了 :) - Nikhil Aggarwal

如果我们想要为主标题设置样式怎么办？例如：

1. 项目

由于<li>已经打开，它会为整个段落设置样式。 - Carl

我现在将2.3和2.4添加到HTML上，但它不继续了！ - Carl

你应该将第二个li中的ol移动。这是更新后的fiddle - http://jsfiddle.net/f3adtsmb/2/ - Nikhil Aggarwal