Nested ol show numder just use CSS only.(not support ie6-7)

How it works?

Html code is simple,just keep the right hierarchy.

<ol class="increment-ul">
    <li>第一章</li>
    <li>第二章
            <ol>
                    <li>第一节</li>
                    <li>第二节
                            <ol>
                                <li>第一段</li>
                                <li>第二段</li>
                                <li>第三段
                                    <ol>
                                        <li>第一小段</li>
                                        <li>第二小段</li>
                                        <li>第三小段</li>
                                </ol>
                                </li>
                        </ol>
                    </li>
                    <li>第三节</li>
            </ol>
    </li>
    <li>第三章
            <ol>
                    <li>第一节</li>
                    <li>第二节</li>
                    <li>第三节</li>
            </ol>
    </li>
</ol>

The css code

.increment-ul,.increment-ul li {list-style: none;margin:0;padding:0;}
.increment-ul li:before {display:inline-block;margin-right: 0.5em;font-size: 1.6em;font-style: italic;color:#999;}

.increment-ul {counter-reset:l1;}
.increment-ul>li:before {content:counter(l1)'.';counter-increment:l1;}

.increment-ul>li>ol {counter-reset:l2;}
.increment-ul>li>ol>li:before {content:counter(l1)'.'counter(l2);counter-increment:l2;}

.increment-ul>li>ol>li>ol {counter-reset:l3;}
.increment-ul>li>ol>li>ol>li:before {content:counter(l1)'.'counter(l2)'.'counter(l3);counter-increment:l3;}

.increment-ul>li>ol>li>ol>li>ol {counter-reset:l4;}
.increment-ul>li>ol>li>ol>li>ol>li:before {content:counter(l1)'.'counter(l2)'.'counter(l3)'.'counter(l4);counter-increment:l4;}
/*you can add more level here*/

You can add more level yourself.l1-l4（is just variables you named） reset the level of li tag.

View the Demo