我使用嵌套计数器和作用域来创建有序列表：
2
936ol {
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 <!-- 这是出错的地方，当返回到父级时 -->
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/
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
收藏
使用这个样式仅改变嵌套列表：
ol { counter-reset: item; } ol > li { counter-increment: item; } ol ol > li { display: block; } ol ol > li:before { content: counters(item, ".") ". "; margin-left: -20px; }取消选中“标准化CSS” - http://jsfiddle.net/qGCUk/3/ 在此中使用的CSS重置将所有列表的边距和填充设置为0
更新 http://jsfiddle.net/qGCUk/4/ - 您必须在主要的
<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>