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

Question

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

我的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似乎特别糟糕地处理它（我习惯于将其作为奇怪的人）。

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

我只是遗漏了什么，或者这是一个理解的问题？那里有没有好的实施？

Answer 1

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

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

以下是您需要的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.2项目 3.项目（而不是预期的2）