css实现多嵌套列表项

这里主要是使用了css的counters特性,配合before，table-cell完成完美的样式呈现。

w3对counters做了如下描述

Counters are denoted by case-sensitive identifiers (see the ‘counter-increment’ and ‘counter-reset’ properties). To refer to the value of a counter, the notation ‘counter(<identifier>)’ or ‘counter(<identifier>, <’list-style-type’>)’, with optional white space separating the tokens, is used. The default style is ‘decimal’.

To refer to a sequence of nested counters of the same name, the notation is ‘counters(<identifier>, <string>)’ or ‘counters(<identifier>, <string>, <’list-style-type’>)’ with optional white space separating the tokens.

The following style sheet numbers nested list items as “1″, “1.1″, “1.1.1″, etc.

ol{
    padding:0px;
    margin:0px;
}
ol.numbersNestedList {
    counter-reset: item;
    display: table;
    width: 100%;
}
ol.numbersNestedList li { 
    display: table;
}
ol.numbersNestedList li:before {
    content: counters(item, ".") "."; counter-increment: item;
    display: table-cell;
    padding-right: 10px;
}

html code:

<ol class="numbersNestedList">
            <li>
                tet dfef dfe se f dfe fdfe dfe 
                <ol class="numbersNestedList">
                <li>dfeoj df fef dfs</li>
                <li>dfeoj df fef dfs</li>
                </ol>
            </li>
            <li>
                tet dfef dfe se f dfe fdfe dfe 
                <ol class="numbersNestedList">
                <li>dfeoj df fef dfs</li>
                <li>dfeoj df fef dfs</li>
                </ol>
            </li>
            <li>
                tet dfef dfe se f dfe fdfe dfe 
                <ol class="numbersNestedList">
                <li>dfeoj df fef dfs</li>
                <li>dfeoj df fef dfs</li>
                </ol>
            </li>
        </ol>

這裡查看demo

支持ie8以上瀏覽器

转载于:https://my.oschina.net/homeemail/blog/263744