問(wèn)題描述

如果是原生的CSS（不使用編譯器）可不可以達(dá)到這樣的效果？或者有沒有哪個(gè)屬性或方法是可以使數(shù)值與n相關(guān)的？

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

問(wèn)題解答

在原生的基礎(chǔ)上，部分 Firefox 瀏覽器可以實(shí)現(xiàn) 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

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