使用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并且即具有相同的行为,而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演示

如果您想了解如何将多个计数器与嵌套列表一起使用,那么这个答案会演示一些更复杂的东西.我们的想法是重置父ol元素中的计数器,并在各自的子li:before伪元素中递增它们; 在你的情况下,你在li:before伪元素中都做了两件事,这是不正确的.

有用的阅读:W3C CSS2.1生成的内容规范,§12.4.1嵌套的计数器和范围