三级十进制有序列表CSS [英] Three level decimal ordered list CSS

问题描述

我在html中有一个三级有序列表，我想给出以下样式：

I have a three level ordered list in html that I would like to give a style as following:

1. Item 1
1.1 Item 2
1.1.1 Item 3

html会出现在下一个代码段中：

An example of the html is in the next plunker:

http://plnkr.co/edit/DqhZ5pJILTUHGSNaA1vm?p=preview

我已经使用

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

但它似乎不起作用。

请，任何相关的注释将对您有很大帮助。

Please, any comment related would be a great help.

推荐答案

您的CSS代码几乎可以，请参见 http://plnkr.co/edit/wmGhz7V6CKqZ7MmHIoDF?p=preview

your css code is almost fine, see http://plnkr.co/edit/wmGhz7V6CKqZ7MmHIoDF?p=preview

在第1级之后，您有一个额外的< / li>< li> ，因此您的标记变成

you have an extra </li><li> after level 1, so your markup becomes

<ol>
    <li> Should be Item 1
       <ol>
           <li> Should be Item 1.1</li>
           <li> Should be Item 1.2</li>
           <li> Should be Item 1.3
               <ol>
                   <li> Should be Item 1.3.1</li>
               </ol>
           </li>
           <li>Should be Item 1.4</li> 
       </ol> 
    </li>
    <li> Should be Item 2</li> 
 </ol>

，在您的CSS中，我删除了 ol 和列表样式：无；

and in your css I've removed the base list style for ol with list-style: none;

这篇关于三级十进制有序列表CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！