Sử dụng bộ đếm css trong calc

Question

Tôi có một danh sách ul> li * 5 (không phải lúc nào cũng bằng nhau). Tôi thiết lập một bộ đếm mà tôi nhận được:

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

Các Câu hỏi Tôi có thể sử dụng truy cập (kỹ năng) bên trong một calc () hoặc tôi có thể thêm đơn vị để nó px em rem% ms s

tôi đã thử:

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

Tôi muốn có sự chậm trễ tăng ví dụ:

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

Answer 1

Các Câu hỏi Tôi có thể sử dụng bộ đếm (kỹ năng) bên trong một calc()

số Bạn không thể.

Chức năng calc không cho phép sử dụng chức năng counter làm thành phần của nó. Từ thông số kỹ thuật ở đây - https://www.w3.org/TR/css3-values/#calc-notation:

Các thành phần của một biểu thức calc() có thể giá trị văn chương hoặc attr() hoặc calc() biểu thức.

Đã có nhiều yêu cầu cho điều này nhưng luôn bị từ chối. Lý do cơ bản có vẻ là hàm counter() đại diện cho (đầu ra) là <string> và do đó không thể được sử dụng trực tiếp trong calc. Hơn nữa, các quầy được coi là rất đắt đối với các trình duyệt.

tham khảo: https://lists.w3.org/Archives/Public/www-style/2016Aug/0082.html

Tuy nhiên, đã có đề xuất thêm một chức năng counter-value() mà sẽ trả về giá trị là số nguyên và có thể được sử dụng trong calc. Xem tại đây: https://drafts.csswg.org/css-lists-3/#counter-functions (Cuộn xuống để xem Số phát hành 4).

Vì vậy, hiện tại, bạn không thể sử dụng counter bên trong calc và counter-value chưa tồn tại.