CSS Counter Increment不起作用

Question

這是我的CSS和HTML：

 .moving-steps > li:before { background: none repeat scroll 0 0 #8F8888; border-radius: 15px; color: #FFFFFF; counter-increment: headings 1; content: counter(headings, decimal); display: block; float: left; font-size: 16px; font-weight: bold; height: 25px; line-height: 26px; margin-bottom: 0; margin-right: 5px; text-indent: 8px; width: 25px; } 

 <ul class="moving-steps"> <li></li> <li></li> <li></li> </ul> 

此代碼無效。

 counter-increment: headings 1;  
 content: counter(headings, decimal); 

每次插入1 ，我錯過了什么？

Answer 1

你應該在ul本身上有這個css：

.moving-steps {
    counter-reset: headings;
}

和counter-increment應該只包含headings ：

.moving-steps > li:before {
    counter-increment: headings;
}

看看這個JS小提琴 ：

 .moving-steps { counter-reset: headings; list-style: none; } .moving-steps > li:before { background: none repeat scroll 0 0 #8F8888; border-radius: 15px; color: #FFFFFF; counter-increment: headings; content: counter(headings, decimal); display: block; float: left; font-size: 16px; font-weight: bold; height: 25px; line-height: 26px; margin-bottom: 0; margin-right: 5px; text-indent: 8px; width: 25px; } 

 <ul class="moving-steps"> <li>First item</li> <li>Second item</li> <li>Third item</li> </ul> 

Answer 2

只需添加以下樣式

body{counter-reset: headings;}

然后價值將增加