Question

我有一个有序列表。我想将初始数字设为6.我使用了<ol start="4">。它工作正常。稍后，我将此列表转换为其他格式，因此我将type属性更改为<ol type="A">或我需要的任何格式。

现在我想将分隔符（默认为点（。））更改为）。

前：

<ol start="4" type="A"></ol>

D._____
E._____
F._____

到

<ol start="4" type="A"></ol>

D)_____
E)_____
F)_____

使用css

ol{
counter-reset: item;
}  
ol > li {
display: block;
}
ol > li:before {
content:counters(item) ")";
counter-increment: item
}

但它会重置计数器值并将结果显示为

1)_____
2)_____
3)_____

所以我需要的是使用计数器和类型值来定义分隔符

例如：

如果，<ol start="4" type="A"></ol> 结果应该是

D)_____
E)_____
F)_____

如果，<ol start="4" type="i"></ol> 结果应该是

 iv)_____
  v)_____
 vi)_____

等。如何更改css以获得上面提到的结果？ Javascript和Jquery解决方案也是可以接受的。有人可以帮帮我吗。

counter-reset: item 3; // working
counter-reset: item attr(start); // not working

所以，我需要从start属性中获取整数值

Answer 1

请尝试以下操作： DEMO

<强> CSS：

ol.c {list-style-type:upper-roman;}
ol.d {list-style-type:lower-alpha;}
li{position: relative;}
li:before{position: absolute; left: -13px; content: ')'; background:white;}

输出将如下：

vi) Test

vii) Test

viii) Test

更新了小提琴 Demo

<强> CSS：

ol {
    counter-reset: listCounter 4;
    list-style-type:none;
}
ol.c li:before {
    content:"(" counter(listCounter, upper-roman)") ";
}

输出将如下：

(vi) Test

(vii) Test

(viii) Test

希望这有帮助

Answer 2

这是使用CSS counter的另一种方法。请查看 DEMO 。

ol{
counter-reset: heading 3;  
list-style-type:none;
}  
ol > li {
position:relative;
}
ol > li:before {
  position:absolute;
 counter-increment: heading  ;
 content: counter(heading, lower-alpha ) ")";  
  margin-left:-18px;
}

更新了HTML版本。

ol > li {
position:relative;
}
ol > li:before {
 position:absolute;
 content: attr(start) ") ";
 margin-left:-11px;
 background:white; /*background color playing a trick by removing  bg color this dot `.` again appear*/
}

Answer 3

你可以制作a）的图像然后应用这个css：

ul.li {
list-style-image: url('url/to/image.png');
}

具有开始和分隔符的CSS列表样式

3 个答案: