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

我使用的是一个自封的编号列表。如何读取start属性并使用CSS将其添加到计数器

HTML

只需添加：

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

很遗憾，您不能在计数器重置中使用

attr

，但您可以添加规则来更改增量

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

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

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

HTML

您可以将属性“开始”用作过滤器： ，但这仅适用于此

ol

属性。为了检索要应用的属性值，生成正确的

计数器重置

，您需要一些javaScript

---

请参见：从这些行生成100条规则：

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

如果SCS在您的主机上不可用，那么只需复制粘贴生成的规则即可

---

：

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

$（this）.css（'counter-reset'，val）也有效：）

.
只是提供了GCyrillus JS解决方案的简化版本

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

我希望CSS能够读取和使用HTML属性中的数值：（
我知道这是一个老问题，但我把它放在这里是因为它可能会帮助一些人

无法读取css计数器属性中的属性。
相反，您可以将内联css与计数器重置一起使用来定义特定列表的起始编号。

（是的，我知道使用内联css不是最佳实践，但它可以而且应该用于像这样的边缘情况）

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

HTML


[编辑]：保留建议的“开始”属性，以解决可访问性和渐进增强问题，即使在Firefox中启用了计数器重置，也支持：

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

jQuery脚本基于Daniel Tonon的输入。
回到我已经忘记的一个老问题

现在已经有了可以使用的属性，即使是这样，也需要在
start
属性旁边添加
style
属性

自定义属性（有时称为CSS变量或级联变量）是由CSS作者定义的实体，包含要在整个文档中重用的特定值。它们使用自定义属性表示法（例如--main color:black；）设置，并使用var（）函数（例如，color:var（--main color）；）访问

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


ol{
列表样式类型：无；
/*这和我预期的不一样
计数器复位：lis attr（开始，编号，0）*/
/*使用css变量从html更新*/
计数器复位：lis计算（var（--s）-1）；
/*calc（）用于保持html属性值的一致性*/
}
李{
计数器增量：lis
}
李：以前{
内容：柜台（lis）”；
颜色：红色；
}

头号人物
二号
三号
十号
十一号
十二号
三十号
三十一号
三十二号
您想要什么结果？将其连接到计数器？您想要这样的结果吗？计数器应该匹配文本数字=）在这种特定情况下，
ol[start=“10”]{counter increment:lis 9；}
可以工作，但是我希望有一个通用的方法，通用的方法是通过javascript检索起始值，然后重用它来生成CSS规则。CSS无法做到这一点，它只能通过content:attr（myattribute）在屏幕属性值处打印。9否<代码>计数器增量：lis 9

@j08691-10的开头在

ol

级别，然后在

li

级别递增，因此第一个是11。如果实际指定的起点是10，那么9是一个更好的增量sure@Möhre-你尝试过上面提到的替代方案吗？@SW4不，它现在才出现，但我仍然看不到真正的解决方案，因为偏移量可以是“17”@Möhre好的，我现在看到了。正如我所建议的，您需要javascript来检索起始值。CSS不能像您尝试的那样重用它（很遗憾，如果属性值可以这样重用，那么将有很多更简单的方法来管理它：）…而且必须已经有一个用于默认行为的内部函数。太糟糕了，真的太糟糕了。jQuey可以吗？我需要一个仅CSS的解决方案=/。由于目前这是不可能的，我将在一个单独的样式表中生成所有的可能性。我注意到100x只会浪费~2KB的拉链。但是谢谢你的想法——认为它会帮助其他人。@Möhre那么对于CSS的事情，使用预处理器来生成CSS，所以不需要编辑几十条类似的规则。请参阅，单击眼睛可以看到，通过ScssI生成的100条规则仍会在“开始”属性值中下降，以进行渐进增强，或者如果用户打印页面

这种内联样式比任何属性，甚至任何CSS变量方法都更有效。您需要“开始”属性来实现可访问性，以便屏幕阅读器用户获得正确的数字。哇，我喜欢它！仍然不是最终的解决方案，而是最好的通用解决方案。使用此代码，您不需要JS或其他样式规则。

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

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

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

$( "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 );
});

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

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

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

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