如何合并重复CSS规则并使用属性选择器匹配任意数字后缀的ID选择器

当然可以！你完全不用再写一堆重复的CSS规则，原生CSS就有完美的解决方案来实现你想要的「匹配所有#tns+数字元素」的效果。

最直接的原生CSS方案：属性开头选择器 #

用[id^="tns"]这个属性选择器，它会匹配所有id以tns开头的元素，正好对应你要的#tns[n]需求。把所有重复规则替换成这一段就够了：

[id^="tns"] > .tns-item {
  width: calc(5.9% - 6px);
}

小提示： #

• 这个选择器会自动匹配#tns1、#tns2……直到#tnsN，不管数字是多少，都能精准命中目标元素。
• 如果你的页面里没有其他id以tns开头的无关元素（比如#tns-test这种），这个方案简洁又高效，完全能满足需求。

更精准的匹配（可选） #

如果担心有其他tns开头的id被误匹配，你可以结合:where()伪类进一步限制，确保id是tns后跟指定数字：

[id^="tns"]:where([id$="1"], [id$="2"], [id$="3"], [id$="4"], [id$="5"], [id$="6"], [id$="7"]) > .tns-item {
  width: calc(5.9% - 6px);
}

不过这个写法相对繁琐，只有当你确实有其他tns开头的无关id时才需要用到。

预处理器方案（如果使用Sass/Less） #

如果你项目里用了CSS预处理器，还可以用循环批量生成规则，比如Sass的写法：

@for $i from 1 through 7 {
  #tns#{$i} > .tns-item {
    width: calc(5.9% - 6px);
  }
}

编译后就会生成你原来的那7条规则，但维护起来只需要修改循环的起止数字就行。

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