CSS:没有计数器的编号元素变量()

问题描述 投票:0回答:0

不幸的是,我正在使用的环境不支持 CSS counter() 函数。但我仍然需要将编号变量分配给任意数量的元素。我唯一能想到的就是用大量的变量赋值来膨胀我的样式表,并希望用户不要超过这个数量。但是明明很丑:

tab:nth-last-of-type( 1){--n-last-tab: 1;} tab:nth-last-of-type( 2){--n-last-tab: 2;}
tab:nth-last-of-type( 3){--n-last-tab: 3;} tab:nth-last-of-type( 4){--n-last-tab: 4;}
tab:nth-last-of-type( 5){--n-last-tab: 5;} tab:nth-last-of-type( 6){--n-last-tab: 6;}
tab:nth-last-of-type( 7){--n-last-tab: 7;} tab:nth-last-of-type( 8){--n-last-tab: 8;}
tab:nth-last-of-type( 9){--n-last-tab: 9;} tab:nth-last-of-type(10){--n-last-tab:10;}
tab:nth-last-of-type(11){--n-last-tab:11;} tab:nth-last-of-type(12){--n-last-tab:12;}
tab:nth-last-of-type(13){--n-last-tab:13;} tab:nth-last-of-type(14){--n-last-tab:14;}
tab:nth-last-of-type(15){--n-last-tab:15;} tab:nth-last-of-type(16){--n-last-tab:16;}
tab:nth-last-of-type(17){--n-last-tab:17;} tab:nth-last-of-type(18){--n-last-tab:18;}
tab:nth-last-of-type(19){--n-last-tab:19;} tab:nth-last-of-type(20){--n-last-tab:20;}
tab:nth-last-of-type(21){--n-last-tab:21;} tab:nth-last-of-type(22){--n-last-tab:22;}
tab:nth-last-of-type(23){--n-last-tab:23;} tab:nth-last-of-type(24){--n-last-tab:24;}
tab:nth-last-of-type(25){--n-last-tab:25;} tab:nth-last-of-type(26){--n-last-tab:26;}
tab:nth-last-of-type(27){--n-last-tab:27;} tab:nth-last-of-type(28){--n-last-tab:28;}
tab:nth-last-of-type(29){--n-last-tab:29;} tab:nth-last-of-type(30){--n-last-tab:30;}

是否有一些 hacky 方法可以在没有 counter() 的情况下获得类似计数器的行为?或者其他一些优化方法?

css variables counter
© www.soinside.com 2019 - 2024. All rights reserved.