我使用嵌套计数器和范围创建有序列表:
ol { counter-reset: item; padding-left: 10px; } li { display: block } li:before { content: counters(item, ".") " "; counter-increment: item } <ol> <li>one</li> <li>two</li> <ol> <li>two.one</li> <li>two.two</li> <li>two.three</li> </ol> <li>three</li> <ol> <li>three.one</li> <li>three.two</li> <ol> <li>three.two.one</li> <li>three.two.two</li> </ol> </ol> <li>four</li> </ol>
我期望得到以下结果:
1. one 2. two 2.1. two.one 2.2. two.two 2.3. two.three 3. three 3.1 three.one 3.2 three.two 3.2.1 three.two.one 3.2.2 three.two.two 4. four
相反,这是我看到的 (编号错误) :
1. one 2. two 2.1. two.one 2.2. two.two 2.3. two.three 2.4 three <!-- this is where it goes wrong, when going back to the parent --> 2.1 three.one 2.2 three.two 2.2.1 three.two.one 2.2.2 three.two.two 2.3 four
我不知道,有没有人看到哪里出了问题?
这是一个JSFiddle:http : //jsfiddle.net/qGCUk/2/
取消选中“规范化CSS” 使用的CSS重置将所有列表边距和填充默认设置为0
您必须在主目录中包含子列表<li>
<li>
ol { counter-reset: item } li { display: block } li:before { content: counters(item, ".") " "; counter-increment: item } <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>