使用 CSS“内容”来设置分层嵌套列表的样式

Question

我在使用 css“内容”属性创建一个有序列表时遇到了一点问题，该列表的样式已被设置为使用小数显示更深层嵌套的项目。我正在尝试做的似乎是一项显而易见的任务，但我还没有成功，而且我遇到了一些跨浏览器的问题，但我似乎在互联网上找不到太多的东西......我我在这个问题底部附上的图片中清楚地说明了“我正在尝试做的事情”。

我的 CSS：

ol {list-style:none; font:11px arial; margin:0px 0px 0px 10px; padding:0;}

ol li:before {
        content: counter(num) ". ";
        counter-increment: num;
        counter-reset: sub_num;
}

ol ol li:before {
        content: counter(num) "." counter(sub_num)  " ";
        counter-increment: sub_num; 
        counter-reset: sub_sub_num;
}
ol ol ol li:before {
        content: counter(num) "." counter(sub_num)  "." counter(sub_sub_num) " ";
        counter-increment: sub_sub_num; 
        counter-reset:none;
}

我的 HTML：

<ol>
    <li>Level 1 - should be '1.'</li>
    <li>Level 1 - should be '2.'
      <ol>
        <li>Level 2 - Should be '2.1'</li>
        <li>Level 2 - Should be '2.2'
          <ol>
            <li>Level 3 - Should be '2.2.1'</li>

            <li>Level 3 - Should be '2.2.2'</li>
          </ol>
        </li>
      </ol>
    </li>
    <li>Level 1 - should be '3.'
      <ol>
        <li>Level 2 - Should be '3.1'</li>
      </ol>
    </li>
</ol>

我的结果

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

counter-increment: num;

在任何浏览器中，Chrome 不会增加“sub_sub_num”

counter-increment: sub_sub_num; 

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

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

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

Answer 1

有一个名为counters() 的便捷函数可以自动为您处理所有这些——只需传入num 变量和句点符号作为分隔符。您不必创建或增加任何其他变量。

您还忘记在顶级 ol 元素中重置 num。

这是您需要的 CSS：

ol {
    list-style: none; 
    font: 11px arial; 
    margin: 0px 0px 0px 10px; 
    padding: 0;
    counter-reset: num;
}

ol li:before {
    content: counter(num) '. ';
    counter-increment: num;
}

ol ol li:before {
    content: counters(num, '.') ' ';
}

jsFiddle demo

如果您想了解如何在嵌套列表中使用多个计数器，this answer 演示了一些更复杂的东西。这个想法是在父ol元素中重置你的计数器，并在它们各自的子li:before伪元素中增加它们；在您的情况下，您在 li:before 伪元素中都这样做，这不太正确。

有用的阅读：W3C CSS2.1 generated content spec, §12.4.1 Nested counters and scope

Answer 2

@BoltClock 如果和

，您的解决方案效果很好

标签未放入 . 如果插入到 a (即使 Div 的 css 是空的) 你的脚本就出来了，你有没有想过要纠正这个问题： 1.项目 1.1项 1.2项 3.项目（而不是预期的2）