如何简化CSS中带数字的类名规则 实现数值增长时无限适配

1. 统一匹配.aN .tN样式 #

直接使用CSS前缀属性选择器即可实现全适配，无需逐个枚举数字，后续类名数字增长也能自动生效：

/* 匹配所有类名以a开头的父元素下，类名以t开头的子元素 */
[class^="a"] [class^="t"] {
  color: rgb(40, 40, 255);
}

如果你的元素存在多个类名，.aN不是第一个类，可将[class^="a"]替换为[class*="a"]匹配所有包含a前缀类名的元素

如果需要严格保证父元素和子元素的后缀数字一致（避免.a1下的.t2被误匹配），可以给所有.a开头的元素增加自定义属性data-index，值为类名后的数字：

<div class="a1" data-index="1">
  <div class="t1">内容</div>
</div>

再配合属性选择器精确匹配即可。

2. 动态计算line偏移量 #

复用上面的data-index自定义属性，配合CSS变量和attr()函数即可实现动态计算，完全不需要逐行写规则：

[class^="a"] .line {
  /* 取出当前父元素的index值，减1得到计算系数 */
  --offset-coeff: calc(attr(data-index number, 0) - 1);
  transform: translateX(calc((830px / 6 + 1px) * var(--offset-coeff)));
}

如果你的.aN元素是按顺序排列的同级兄弟元素，不需要额外加自定义属性，用:nth-child()配合CSS计数器也可以实现：

/* 父容器先初始化计数器 */
.parent-container {
  counter-reset: a-index 0;
}
[class^="a"] {
  counter-increment: a-index;
}
[class^="a"] .line {
  --offset-coeff: calc(counter(a-index) - 1);
  transform: translateX(calc((830px / 6 + 1px) * var(--offset-coeff)));
}

兼容旧浏览器的预处理器方案 #

如果项目需要兼容不支持attr()动态计算的旧浏览器，可以用Sass/Scss等预处理器循环生成规则：

@for $i from 1 through 100 { /* 按需调整最大数字上限 */
  .a#{$i} .t#{$i} {
    color: rgb(40, 40, 255);
  }
  .a#{$i} .line {
    transform: translateX(calc((830px / 6 + 1px) * #{$i - 1}));
  }
}

内容的提问来源于stack exchange，提问作者Ti Brun3