订单列表不适用于ol type =“a”

时间:2014-02-27 18:03:26

标签: html css css3

我想使用类显示如下的订单列表。我试过但它不起作用,请帮帮我怎样才能做到?

1. List item
    1.1 list item
       (a) lit item a
       (b) list item b
 2. List item
    2.1 list item
       (a) lit item a
       (b) list item b



.listStyle08 {
    counter-reset: item;
} 
.listStyle08 ol {
    counter-reset: item;
}
.listStyle08 li {
    display: block;
}
.listStyle08 li:before {
    content: counters(item, ".") " ";
    counter-increment: item;
    display: inline-block !important;
    padding-right: 10px;
}

1 个答案:

答案 0 :(得分:5)

以下a jsfiddle有一个可行的解决方案。

为方便起见,这里复制了样式:

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

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

ol ol ol {
    counter-reset: list;
    margin: 0;
}

ol ol ol > li {
    list-style: none;
    position: relative;
}

ol ol ol > li:before {
    counter-increment: list;
    content: "(" counter(list, lower-alpha) ") ";
    position: absolute;
    left: -1.4em;
}

来源: