23

我正在使用一个自命名的编号列表。如何读取 start-attribute 并使用 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;
}

小提琴

4

8 回答 8

17

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

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

Demo，但这仅适用于该ol属性。您需要一些 javaScript 来检索要应用的属性值，生成正确的counter-reset.

<ins data-extra="Use of Scss">

看到这个：演示从这些行生成 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>

于 2014-05-16T15:53:00.733 回答
11

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

您无法读取 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/）

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

于 2018-10-31T15:51:54.537 回答
6

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

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

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

于 2015-10-06T05:59:09.710 回答
2 

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;。在 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;
}
于 2021-08-09T12:24:38.297 回答
2

Back on an old question i have forgotten about.

Nowdays there is the CSS custom properties that could be used , even then , it requires to add a style attribute aside your start attribute

Custom properties (sometimes referred to as CSS variables or cascading variables) are entities defined by CSS authors that contain specific values to be reused throughout a document. They are set using custom property notation (e.g., --main-color: black;) and are accessed using the var() function (e.g., color: var(--main-color);).

example (if the code is generated it seems easier to set both value the same for start=x and var(--s:x) to avoid mistake):

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>

That's far to late to be an answer but could be useful to anyone else from now.

于 2019-09-25T11:48:59.630 回答
1

只需添加：

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;
}
于 2014-05-16T15:36:14.653 回答
0

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

<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;
}
于 2021-07-23T09:48:16.663 回答
0

即使在 Firefox 中启用了 counter-reset，也要支持 <ol start="10">：

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

jQuery 脚本基于 Daniel Tonon 的输入。

于 2019-08-06T12:06:41.283 回答