Question

我们可以使用默认的CSS编号样式，但有没有办法可以创建编号附带的自定义列表？

例如我们的默认列表：

1. Item
2. Item
3. Item

但我正在寻找的是这样的：

 (1) Item
 (2) Item
 (3) Item

甚至可能吗？

这些是现有的list-style-type：

http://codepen.io/impressivewebs/pen/fKjFL

Answer 1

是的可能：

<强> CSS

ol {
    counter-reset: section;
}
li{
    list-style: none;
}


li:before {
    counter-increment: section;
    content: "(" counter(section)  " )";
}

查看演示

<强> JSFIDDLE

Answer 2

您可以使用CSS“Counter”概念来实现此目的。下面的代码将帮助您做到这一点。

<ol>
    <li>Coffee</li>
    <li>Tea</li>
    <li>Coca Cola</li>
</ol>


ol {list-style-type: none;}
li:before {content: "(" counter(section, decimal) ") ";}
li { counter-increment: section;}

小提琴：http://jsfiddle.net/kiranvarthi/pqnu2Lj4/1/

Answer 3

是的，这是可能的，看看这个：

http://www.456bereastreet.com/archive/201105/styling_ordered_list_numbers/

Answer 4

按照上述帖子，只需为需要的人添加反重置：

ol {list-style-type: none;  }
li:before {content: "(" counter(section, decimal) ") ";}
li { counter-increment: section;}
ol { counter-reset: section;  }

<ol>
<li>Eyes</li>
<li>Hair
    <ol>
        <li>Straight</li>
        <li>Curly
            <ol>
                <li>Blonde</li>
                <li>Dark</li>
            </ol>
        </li>
    </ol>
    </li>
<li>Ears</li>
</ol>

小提琴：https://jsfiddle.net/baltazarz3/sqqm9uav/1/

带编号的CSS自定义列表样式类型

4 个答案: