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

Question

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

小提琴

Answer 1

我看到这是一个老问题，但我把它放在这里是因为它可能会对某人有所帮助。

您无法读取 css 计数器属性中的属性。相反，您可以使用内联 css withcounter-reset来定义特定列表的起始编号。
（是的，我知道使用内联 css 不是最佳实践，但它可以而且应该用于像这样的边缘情况）

第一项将重置值增加 1，因此除了提供计数器名称之外，您还需要将列表开始的数字减去 1：

HTML

<ol>
    <li>Number One</li>
    <li>Number Two</li>
    <li>Number Three</li>
</ol>

<!-- NOTE: List numbering starts at counter-reset + 1 -->
<ol style="counter-reset: lis 9;" start="10">
    <li>Number Ten</li>
    <li>Number Eleven</li>
    <li>Number Twelve</li>
</ol>

CSS

ol {
    list-style-type: none;
    counter-reset: lis; /* Resets counter to zero unless overridden */
}
li {
    counter-increment: lis
}
li:before {
    content: counter(lis)". ";
    color: red;
}

小提琴（http://jsfiddle.net/hcWpp/308/）

[编辑]：按照建议保留开始属性以解决可访问性和渐进增强

Answer 2

您可以只使用属性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>

Answer 3

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

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

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

Answer 4

ol {
    list-style-type: none;

    counter-reset: lis var(--start-value, 0);
}
li {
    counter-increment: lis;
}
li:before {
    content: counter(lis)". ";
    color: red;
}

<ol>
    <li>Number One</li>
    <li>Number Two</li>
    <li>Number Three</li>
</ol>

<ol style="--start-value: 1;">
    <li>Number Two</li>
    <li>Number Three</li>
    <li>Number Four</li>
</ol>

您可以使用 CSS 自定义属性（变量），请参阅。

例如，对列表使用内联样式并添加自定义属性--start-value: 1;。var(--start-value, 0);在 CSS 中，您可以像后备值 ( )一样使用它0。如果您跳过此自定义属性，列表将默认启动。

超文本标记语言

<ol style="--start-value: 1;">
    <li>Number Two</li>
    <li>Number Three</li>
    <li>Number Four</li>
</ol>

CSS

ol {
    list-style-type: none;

    counter-reset: lis var(--start-value, 0);
}
li {
    counter-increment: lis;
}
li:before {
    content: counter(lis)". ";
    color: red;
}

Answer 5

只需添加：

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

演示小提琴

不幸的是，您不能使用attrin 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

如果数字前缀可以是任何数字，则以下内容将对此进行规定：

超文本标记语言

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