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

llew8vvj  于 2023-01-14  发布在  其他
关注(0)|答案(9)|浏览(166)

我正在使用一个自定义的编号列表。我如何读取start-attribute并将其添加到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;
}
<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>
ukdjmx9f

ukdjmx9f1#

您可以只使用属性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解决方案:

$( "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>

k5hmc34c

k5hmc34c2#

我知道这是一个老问题,但我把它放在这里,因为它可能会帮助一些人。
你不能读取css计数器属性中的属性。相反,你可以使用内联css和counter-reset来定义特定列表的起始编号。
(Yes,我知道使用内联css不是最佳实践,但它可以而且应该用于像这样的边缘情况)
第一项将重置值递增1,因此除了提供计数器名称之外,还需要将希望列表开始的数字减去1:
超文本标记语言

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

FIDDLE (http://jsfiddle.net/hcWpp/308/)
[编辑]:保留建议的开始属性,以解决可访问性和渐进增强

mnemlml8

mnemlml83#

仅提供GCyrillus JS解决方案的简化版本

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

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

g0czyy6m

g0czyy6m4#

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
例如,对list使用内联样式并添加自定义属性--start-value: 1;。在CSS中,您可以像使用var(--start-value, 0);一样使用它,并使用回退值(0)。如果跳过此自定义属性,则默认情况下list将启动。
超文本标记语言

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

中央支助系统

ol {
    list-style-type: none;

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

yh2wf1be5#

回到一个我已经忘记的老问题。
现在可以使用the CSS custom properties,* 即使这样,也需要在start属性旁边添加style属性 *
自定义属性(有时称为CSS变量或级联变量)是由CSS作者定义的实体,包含在整个文档中重复使用的特定值。它们使用自定义属性表示法设置(例如,--main-color:black;),并且使用var()函数来访问(例如,color:var(-主色);).
示例 (如果生成代码,则将start=xvar(--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>

这是一个为时已晚的答案,但可能是有用的其他任何人从现在开始。

f4t66c6m

f4t66c6m6#

只需添加:

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

∮ ∮ ∮ ∮
不幸的是,您不能在counter-reset中使用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;
}

∮ ∮ ∮ ∮
如果数字前缀可以是任何值,则以下内容将对此做出规定:
超文本标记语言

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

中央支助系统

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

hgqdbh6s7#

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

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

jQuery脚本基于丹尼尔Tonon的输入。

epfja78i

epfja78i8#

我的解决方案是:添加类不重置。它为我工作!

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

中央支助系统

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

xpcnnkqh9#

你正在尝试使用自然编号来创建一个带有自定义项目符号的列表,对吗?你可以使用一个名为list-item的内置计数器,你不需要定义自己的计数器。

ol {
    list-style: none;
}
li::before {
    content: counter(list-item) '. ';
}

如果你是通过编程设置的,Chrome和Safari目前不会在不重绘的情况下应用更改(例如,toggle display:none)。

相关问题