如何将CSS计数器重置为给定列表的开始属性 [英] How can I reset a CSS-counter to the start-attribute of the given list
问题描述
我正在使用一个自样式编号列表.如何读取起始属性并将其添加到CSS计数器中?
I am using a self-styled, numbered list. How can I read the start-attribute and add it to the counter with 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;
}
演示 ,但这仅适用于此ol
属性.您需要一些javaScript才能检索要应用的属性值,并生成正确的counter-reset
.
Demo , but this will only apply for this ol
attribute. You would need some javaScript in order to retrieve attribute value to apply, generate the correct counter-reset
.
<ins data-extra="Use of Scss">
请参见: 演示 ,以从中生成100条规则这些行:
see this : DEMO to generate 100 rules from these lines :
@for $i from 1 through 100 {
.ol[start="#{$i}"] {
counter-reset: lis $i ;
}
}
然后复制并粘贴如果主机上不存在Scss生成的规则.
Then just copy paste the rules generated if Scss is not avalaible on your hosting .
</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 );
也适用:)
Notice that : $(this ).css('counter-reset',val );
works too :)
.</ins>
这篇关于如何将CSS计数器重置为给定列表的开始属性的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!