Html 使用CSS“；内容“；设置分层嵌套列表样式的步骤

我在使用css“content”属性创建一个有序列表时遇到了一点问题，该列表的样式为使用小数来显示嵌套更深的项目。我试图做的似乎是一项显而易见的任务，但我还没有成功，我遇到了一些跨浏览器的问题，但我似乎找不到太多关于互联网的信息。。。我想做的是在这个问题底部附上的图片中非常清楚地说明

我的CSS：

ol{列表样式：无；字体：11px arial；边距：0px 0px 0px 10px；填充：0；}
奥利：以前{
内容：计数器（数量）“.”；
计数器增量：num；
计数器重置：子_num；
}
奥利：以前{
内容：计数器（编号）““计数器（编号）”；
计数器增量：sub_num；
计数器复位：sub_sub_num；
}
奥利：以前{
内容：计数器（num）““计数器（sub_num）”“计数器（sub_sub_num）””；
计数器增量：sub_sub_num；
计数器复位：无；
}

我的HTML：

级别1-应为“1”
级别1-应为“2”
2级-应为“2.1”
2级-应为“2.2”
3级-应为“2.2.1”
3级-应为“2.2.2”


级别1-应为“3”
2级-应为“3.1”

我的成果 不幸的是，css没有增加'num'变量

counter-increment: num;

在任何浏览器中，Chrome都不会增加'sub_sub_num'

counter-increment: sub_sub_num; 

我有点困惑，因为似乎所有的浏览器在内部都与它们处理样式的方式不一致（为什么所有浏览器都会忽略num增量，但接受sub_num增量？），而且firefox和ie有同样的行为，这有点令人惊讶，而chrome似乎处理得特别糟糕（我习惯了（我是个古怪的人）

这是一张带有ff8、chrome16和ie8示例输出的图像，显示了我看到的输出以及用户代理字符串：

---

是我遗漏了什么，还是这是一个可以理解的问题？有没有好的实现？

有一个叫做

counters（）的方便函数

为您自动处理所有这些-只需传入

num

变量和句点符号作为分隔符。您不必创建或增加任何其他变量

您还忘记在顶级

ol

元素中重置

num

以下是您需要的CSS：

ol{
列表样式：无；
字体：11px arial；
保证金：0px 0px 0px 10px；
填充：0；
计数器复位：num；
}
奥利：以前{
内容：计数器（num）'；
计数器增量：num；
}
奥利：以前{
内容：计数器（编号“）”；
}

如果您想了解如何使用具有嵌套列表的多个计数器，请演示更复杂的内容。其思想是在父

ol

元素中重置计数器，并在其各自的子

li:before

伪元素中递增计数器；在您的情况下，您在

li:before

ps中同时执行这两项操作eudo元素，这不太正确

有用的阅读：

@BoltClock 如果和

标记不在一个列表中，那么您的解决方案工作得很好。 如果将insert插入到a中（即使Div的css为空），您的脚本将被删除，您是否考虑了一些方法来更正此问题： 1.项目 1.1项目 1.2项目

---

3.项目（而不是预期的2）

您甚至可以使用

计数器（）如果您不需要在顶级计数器之后插入句点，则可以使用
ol li:before
单独使用
ol li:before
。还要注意，我没有将
计数器增量声明添加到
ol li:before
；这是因为它已经存在于
ol li:before
中，因此将自动级联。当然，您可以如果你认为它能帮助你跟踪事情，那就别担心。谢谢！我完全忘了在开始任何循环之前重置num-var…谢谢计数器（）提示。我已经让它很好地工作了。这是一个问题吗？如果是，你应该自己把它作为一个新问题发布。如果你想，你可以参考这个问题。请不要问后续问题作为答案。