Question

是否可以拥有这样的<li>个数字？：

1.1 First Item
1.2 Second Item
2.1 Other item

Answer 1

正确的方法是使用CSS counter-increment属性您可以将部分和子部分设置为“第1部分”，“1.1”，“1.2”等 http://www.w3schools.com/cssref/pr_gen_counter-increment.asp

<style>
    ol { counter-reset: item }
    li { display: block }
    li:before { content: counters(item, ".") " "; counter-increment: item }
</style>

   <ol>
        <li>First level</li>
        <li>First level 2
            <ol>
                <li>Second level</li>
                <li>Second level 2
                    <ol><li>Third level</li></ol>
                </li>
            </ol>
        </li>           
    </ol>

另一个很好的解释： http://www.impressivewebs.com/css-counter-increment/

Answer 2

您可以使用CSS生成的内容和计数器，但猜猜哪个浏览器不支持它......

如果您需要一般支持，则需要在服务器端或使用JavaScript。

http://www.w3.org/TR/CSS21/generate.html

http://www.evotech.net/blog/2009/05/css-content-counter-increment-counter-reset/

Answer 3

此页面列出了HTML中的所有可用列表样式类型（以及浏览器兼容性）：

http://www.quirksmode.org/css/lists.html

正如您所看到的，辅助数字不是支持的选项，因此如果您想完全按照您的建议进行操作，那么您必须手动执行此操作 - 纯文本或javascript或可能使用CSS before:（这最后一个选项可能是我的首选，但它不适用于旧版本的IE）

或者，只是接受HTML不支持它，并使用支持的替代编号方案。使用嵌套列表将允许您将外部列表编号为1,2,3等，而内部列表编号为I，II，III，IV等。

希望有所帮助。

Answer 4

只是为了好玩，这个小jQuery snippet

$("ol").each(function(i) {
    $(this).children("li").not(":has(ol)").each(function(n, el) {
       $(this).prepend("<span>" + i + "." + (n+1) + " </span>");
    });
});

产生所需的效果，但只有在给定此类布局的情况下才能使用2个级别：

<ol>
    <li>
        <ol>
            <li>One</li>
            <li>Two</li>
            <li>Three</li>
        </ol>
    </li>
    <li>
        <ol>
            <li>One</li>
            <li>Two</li>
            <li>Three</li>
        </ol>
    </li>
    <li>
        <ol>
            <li>One</li>
            <li>Two</li>
            <li>Three</li>
            <li>Four</li>
            <li>Five</li>
        </ol>
    </li>
    <li>
        <ol>
            <li>One</li>
            <li>Two</li>
            <li>Three</li>
            <li>Four</li>
        </ol>
    </li>
</ol

带十进制数的列表

4 个答案: