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

FIDDLE

Answer 1

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

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

Demo ，但这仅适用于此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 2

只需添加：

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

Demo Fiddle

不幸的是，您无法在attr中使用counter-reset，但您可以添加规则来更改增量。

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

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

Answer 3

我看到这是一个古老的问题，但我将其放在此处，因为它可能会帮助某个人。

您无法读取CSS计数器属性中的属性。相反，您可以将内联css与counter-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;">
    <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;
}

FIDDLE (http://jsfiddle.net/hcWpp/308/)

Answer 4

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

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

我希望CSS可以读取和使用HTML属性中的数值：（

Answer 5

回到我忘记的一个老问题。

如今有the CSS custom properties可以使用，即使如此，它也需要在您的style属性旁边添加start属性

自定义属性（有时称为CSS变量或级联变量）是CSS作者定义的实体，其中包含要在整个文档中重用的特定值。使用自定义属性符号（例如--main-color：black;）进行设置，并使用var（）函数（例如color：var（-main-color）;）进行访问。

示例（如果生成了代码，则为start=x和var(--s:x)设置两个值似乎更容易，以避免出错）：

ol {
    list-style-type: none;
    /* this does not work like I expected
    counter-reset: lis attr(start, number, 0); */
    
    /* update using the css varaiable from html */
    counter-reset: lis calc(var(--s) - 1) ;
    /* calc() is used to keep html attributes values coherent */

}
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 start="10" style="--s:10"><!-- or set it right away to nine to get rid of calc() in the css rule-->
    <li>Number Ten</li>
    <li>Number Eleven</li>
    <li>Number Twelve</li>
</ol>
<ol start="30" style="--s:30"><!-- or set it right away to twenty nine to get rid of calc() in the css rule -->
    <li>Number Thirty</li>
    <li>Number Thirty one</li>
    <li>Number Thirty two</li>
</ol>

要回答这个问题还很晚，但从现在开始对其他任何人都可能有用。

Answer 6

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 自定义属性（变量），see。

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

HTML

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

即使在Firefox中启用了计数器重置，也要支持

$('ol[start]').each(function() {
    var val = parseFloat($(this).attr("start"));
    $(this).find("li").first().attr("value", val);
});

jQuery脚本基于Daniel Tonon的输入。

Answer 8

我的解决方案是：添加类无重置。它对我有用！

<ol>
    <li>Number One</li>
    <li>Number Two</li>
    <li>Number Three</li>
</ol>
<ol start="10" class="no-reset">
    <li>Number Ten</li>
    <li>Number Eleven</li>
    <li>Number Twelve</li>
</ol>

CSS

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

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

8 个答案:

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

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

Demo Fiddle

Alternative 1

Alternative 2