[英]CSS Counter Increment is not working
这是我的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
,我错过了什么?
你应该在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>
只需添加以下样式
body{counter-reset: headings;}
然后价值将增加
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.