在计算器中使用css计数器 [英] Use css counter in calc

问题描述

我有一个清单 li> 5 （并非总是相同的数量）。我设置了一个我得到的计数器：

1 2 3 4 5

  li：nth-​​child（n）：之前{
 counter-increment：skill; 
 content：counter（skill）; 
颜色：白色; 
} 
  

问题我可以使用计数器（技能）在 calc（）中，或者可以向它添加单位 px em rem％ms s

我试过了：

  transition：全部250ms线性＃{counter（skill）} * 1s; 
转换：全部250ms线性计数器（技能）* 1s; 
  

我希望延迟时间增加，例如：

  li 1s延迟
 li 2s延迟
 li 3s延迟
 li 4s延迟
 li Xs延迟
  




解决方案

问题我可以使用计数器（技能） （）

没有。您不能。





calc 函数不允许使用计数器作为其组件。从这里的规格 - https://www.w3.org/TR/css3
$ b

calc（） 表达式
可以是字面值或
attr（） 或
calc（）
表达式。

为此，但始终拒绝。潜在的原因似乎是 counter（）函数表示（输出）一个< string> ，因此不能直接在 calc 中使用。此外，这些计数器对于浏览器来说是非常昂贵的。

参考： https://lists.w3.org/Archives/Public/www-style/2016Aug/0082.html

然而，有人建议添加计数器值（）函数，该函数将返回值作为整数并可用于计算值。请参阅此处： https://drafts.c​​sswg.org/css-lists-3 /＃counter-functions （向下滚动以查看问题4）。

因此，现在您不能使用 counter calc 和计数器值中的code>目前还不存在。

I have a list ul>li*5 (not always the same amount). I set a counter for which I get:

1 2 3 4 5

li:nth-child(n):before {
  counter-increment: skill;
  content: counter(skill);
  color: white;
}

The Question Can I use the counter(skill) inside a calc() or can I add units to it px em rem % ms s

I have tried:

transition: all 250ms linear #{counter(skill)} * 1s;
transition: all 250ms linear counter(skill) * 1s;

I want to have the delay increased for example:

li 1s delay
li 2s delay
li 3s delay
li 4s delay
li Xs delay

解决方案

The Question Can I use the counter(skill) inside a calc()

No. You can't.

The calc function does not permit the use of counter functions as its components. From the specs here - https://www.w3.org/TR/css3-values/#calc-notation:

Components of a calc() expression can be literal values or attr() or calc() expressions.

There have been many requests for this but always declined. The underlying reason seems to be that the counter() function represents (outputs) a <string> and hence cannot be used directly in calc. Moreover, the counters are considered very expensive for the browsers.

Reference: https://lists.w3.org/Archives/Public/www-style/2016Aug/0082.html

However, there have been proposals for adding a counter-value() function which would return the value as integer and could be used in calc. See here: https://drafts.csswg.org/css-lists-3/#counter-functions (Scroll down to see Issue 4).

So as of now, you cannot use counter inside of calc and the counter-value does not exist yet.

这篇关于在计算器中使用css计数器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！