参见英文答案 >
html – CSS Counter Increment does not work3个
> Create line numbers on pre with CSS only3个
在我的HTML代码中,我定义了以下列表：
> Create line numbers on pre with CSS only3个
在我的HTML代码中,我定义了以下列表：
<p class="list">first.</p> <p class="list">second.</p>
现在,我在css中：
.list {
display: table;
}
.list:before {
display: table-cell;
counter-increment: counter;
content: counter(counter) '.';
padding-right: 5px;
}
并且页面上的结果是：
1. first 1. second
如何将第二个数字增加到2的值？
解决方法
您应该在列表的包装上使用counter-reset属性 – 请参阅下面的演示：
body {
counter-reset:counter;
}
.list {
display: table;
}
.list:before {
display: table-cell;
counter-increment: counter;
content: counter(counter) '.';
padding-right: 5px;
}
<p class="list">first.</p> <p class="list">second.</p>
