如何将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;
}

FIDDLE

推荐答案

您可以只将属性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屋！