li 计数

 

效果图：

html:

<section class="demozone">
        <ol id="counter" class="demo">
            <li>css3新增的选择器
                <ol>
                    <li>属性选择器</li>
                    <li>结构伪类选择器</li>
                </ol>
            </li>
            <li>增强的文本和颜色功能
                <ol>
                    <li>文本阴影，文本换行，溢出文本</li>
                    <li>rgba色彩模式</li>
                </ol>
            </li>
            <li>新增的弹性盒模型
                <ol>
                    <li>box布局</li>
                    <li>弹性布局实战</li>
                </ol>
            </li>
        </ol>
    </section>

 

css:

#counter li{
    margin-left:0;
    list-style:none outside none;
    counter-increment: title1;
}
#counter li:before{
    content:"第"counter(title1)"章：";
    font-size:14px;
    color:#f00;
}
#counter li li{
    margin-left:25px;
    counter-increment: title2;
}
#counter li li:before{
    content:counter(title1)"."counter(title2);
}

 

摘自：w3cplus.com/solution/css3content/css3content.html