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

小提琴

2614

2018-05-16 15:27

起源

你想要什么结果？把它放到柜台？你想要这样的东西 w3schools.com/cssref/... ？ - Aamir Afridi

计数器应与文本数字匹配=） - Möhre

在那个特定的情况下 ol[start="10"] { counter-increment: lis 9; } 会工作，但我想有一个通用的方式。 - Möhre

通用的方法是通过javascript来检索起始值，然后重用它来生成CSS规则。 CSS不能这样做，它只能通过content：attr（myattribute）在屏幕属性值上打印。 - G-Cyr

答案:

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

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

演示，但这只适用于此 ol 属性。您需要一些javaScript才能检索要应用的属性值，生成正确的 counter-reset。

<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>

2018-05-16 15:53

正如我已经评论过这不是解决方案 - Möhre

@Möhre好的，我现在看到了。正如我建议你，你需要javascript来检索起始值。 CSS无法像您尝试的那样重复使用它（很遗憾，如果属性值可以通过这种方式重用，那么将有很多更简单的方法来管理事物:)） - G-Cyr

...并且必须已经存在默认行为的内部函数。太糟糕= / - Möhre

@Möhre是的，真的太糟糕了。一个jQuey会做什么？ codepen.io/gc-nomade/pen/mCJsd - G-Cyr

我只需要一个CSS解决方案= /。由于目前这是不可能的，我将在一个单独的样式表中生成所有可能性。我注意到100x只会浪费~2KB拉链。但感谢您的想法 - 认为它会帮助其他人。 - Möhre

只需添加：

ol:not(:nth-of-type(1)){
    counter-increment: lis 10;
}

演示小提琴

你不能使用 attr 在 counter-reset 不幸的是，你可以添加规则来改变增量。

备选方案1

如果您将拥有多个列表，则更具弹性的版本将是：

ol {
    list-style-type: none;
    /* this does not work like I expected */
    counter-reset: lis;

}
ol:not(:first-of-type){
     counter-increment: ol
}
li {
    counter-increment: lis
}
li:before {
    content: counter(lis)". ";
    color: red;
}
ol:not(:first-of-type) li:before {
    content: counter(ol) counter(lis)". ";
    color: red;
}

备选方案2

如果数字前缀可以是任何内容，则下面将为此提供：

HTML

<ol>
    <li>Number One</li>
    <li>Number Two</li>
    <li>Number Three</li>
</ol>
<ol>
    <li data-prefix="1">Number Ten</li>
    <li data-prefix="1">Number Eleven</li>
    <li data-prefix="1">Number Twelve</li>
</ol>
<ol>
    <li data-prefix="a">Number Ten</li>
    <li data-prefix="b">Number Eleven</li>
    <li data-prefix="c">Number Twelve</li>
</ol>

CSS

ol {
    list-style-type: none;
    counter-reset: lis;
}
li {
    counter-increment: lis
}
li:before {
    content: attr(data-prefix) counter(lis)". ";
    color: red;
}

2018-05-16 15:36

9不？ counter-increment: lis 9; - j08691

@ j08691 - 10的开头是在 ol 等级，然后它增加 li，所以第一个是11.如果实际指定的开始是10，那么肯定是9更好的增量 - SW4

你的选择器不会以一般方式工作= / - Möhre

@Möhre - 您是否尝试过上述替代方案？ - SW4

@ SW4 nope，它刚刚出现，但我仍然看不到真正的解决方案，因为偏移量可能是“17” - Möhre

只提供精简版的GCyrillus JS解决方案

$('ol[start]').each(function() {
    var val = parseFloat($(this).attr("start")) - 1;
    $(this).css('counter-increment','lis '+ val);
});

我希望CSS可以读取并使用HTML属性中的数值:(

2017-10-06 05:59

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

答案: