我正在使用一个自编的编号列表.如何读取start属性并使用CSS将其添加到计数器？
HTML
<ol>
<li>Number One</li>
<li>Number Two</li>
<li>Number Three</li>
</ol>
<ol start="10">
<li>Number Ten</li>
<li>Number Eleven</li>
<li>Number Twelve</li>
</ol>
CSS
ol {
list-style-type: none;
/* this does not work like I expected */
counter-reset: lis attr(start,number,0);
}
li {
counter-increment: lis
}
li:before {
content: counter(lis)". ";
color: red;
}
解决方法
您可以只使用属性start作为过滤器：
ol[start="10"] {
counter-reset: lis 9;
}
Demo,但这只适用于此ol属性.您需要一些javaScript才能检索要应用的属性值,生成正确的计数器重置.
<ins data-extra="Use of Scss">
@for $i from 1 through 100 {
.ol[start="#{$i}"] {
counter-reset: lis $i ;
}
}
然后只需复制粘贴生成的规则,如果Scss在您的主机上不可用.
</in>
< ins data-extra =“jQueryFix”>：
$( "ol" ).each(function() {
var val=1;
if ( $(this).attr("start")){
val = $(this).attr("start");
}
val=val-1;
val= 'lis '+ val;
$(this ).css('counter-increment',val );
});
请注意：$(this).css(‘counter-reset’,val);也工作:)
< / INS>
