如何将CSS计数器重置为给定列表的start-attribute

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

FIDDLE

解决方法

您可以只使用属性start作为过滤器：

ol[start="10"] {
   counter-reset: lis 9;
}

Demo,但这只适用于此ol属性.您需要一些javaScript才能检索要应用的属性值,生成正确的计数器重置.

<ins data-extra="Use of Scss">

看到这个：DEMO从这些行生成100条规则：

@for $i from 1 through 100 {
  .ol[start="#{$i}"] {
    counter-reset: lis $i ;
  }
}

然后只需复制粘贴生成的规则,如果Scss在您的主机上不可用.

</in>

< ins data-extra =“jQueryFix”>：

可以轻松设置jQuery解决方案：DEMO

$( "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>

原文地址：https://www.jb51.cc/css/217845.html