css - :nth-child(n)选择器中的n可不可以引用到属性中？

Question

如果是原生的CSS（不使用编译器）可不可以达到这样的效果？
或者有没有哪个属性或方法是可以使数值与n相关的？

.box:nth-child(n){
    -webkit-animation-delay:n s;
            animation-delay:n s;
}

Answer 1

在原生的基礎上，部分 Firefox 瀏覽器可以實現 CSS 變量

element {
  --animation-delay: 3s;
} 

.box:nth-child(n) {
-webkit-animation-delay: var(--animation-delay);
        animation-delay: var(--animation-delay);
}

詳情看 MDN 的文檔 https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables

Answer 2

不行
nth-child(n) 中的n可以是an b形式，或odd，even或數字，所以不應該被作為變量使用
你要實現的效果應該用js實現
或者可以使用一些支持變量的css預處理語言