使用css計數器計算

Question

我有一個列表ul> li * 5（並不總是相同的數量）。我將計數器設置爲它獲得：

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

問題可否使用計數器（技能）一個計算值（）內或I可以添加單位給它像素EM REM％斯小姐

我曾嘗試：

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

我想有延遲增加，例如：

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

Answer 1

的問題我可以使用計算（）裏的櫃檯（技能）

號你不能。

calc函數不允許使用counter函數作爲其組件。從這裏規格 - https://www.w3.org/TR/css3-values/#calc-notation：

一個 calc()表達 的

組件可以是文字值或 attr()或 calc() 表達式。

對此有很多要求，但總是拒絕。潛在的原因似乎是counter()函數代表（輸出）一個<string>，因此不能直接在calc中使用。而且，這些計數器對於瀏覽器來說被認爲是非常昂貴的。

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

然而，已經有提議增加一個counter-value()函數將返回值作爲整數，並可能在calc使用。見這裏：https://drafts.csswg.org/css-lists-3/#counter-functions（向下滾動查看第4期）。

因此，截至目前，您不能在calc內使用counter，並且counter-value尚不存在。