我正在使用一个自编的编号列表.如何读取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>