javascript - 带有开始和分隔符的 CSS 列表样式

Question

我有一个有序列表。我想给初始数字 6。我用过 <ol start="4"> .它工作正常。后来，我将这个列表转换为其他格式，所以我将类型属性更改为 <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

这是另一种使用 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*/
}