如何使用CSS批量选择类名格式为column-数字的元素

你可以通过CSS的属性选择器结合精准匹配来实现这个需求，以下是两种实用方案：

方案1：兼容主流浏览器的基础写法 #

通过^=匹配类名以column-开头，再用:where()包裹数字结尾的匹配规则，简化代码同时保证兼容性：

/* 选择所有class以column-开头且以数字结尾的元素 */
[class^="column-"]:where([class$="0"], [class$="1"], [class$="2"], [class$="3"], [class$="4"], [class$="5"], [class$="6"], [class$="7"], [class$="8"], [class$="9"]) {
  /* 自定义样式示例 */
  background-color: #f5f5f5;
  padding: 8px;
}

如果元素的class属性包含多个类名（比如<td class="column-4 table-cell">），^=可能失效，此时可改用*=（包含匹配），但要注意避免误匹配column-abc1这类不符合规则的类名：

[class*="column-"]:where([class$="0"], [class$="1"], [class$="2"], [class$="3"], [class$="4"], [class$="5"], [class$="6"], [class$="7"], [class$="8"], [class$="9"]) {
  /* 自定义样式 */
}

方案2：CSS Level 4 正则匹配（精准但需浏览器支持） #

如果目标浏览器支持CSS Level 4特性，可直接用正则匹配完整类名，写法更简洁精准：

/* 匹配class中包含"column-"后跟一个或多个数字的完整类名 */
[class~="column-\d+" i] {
  /* 自定义样式 */
}

这里~=用于匹配完整的独立类名，\d+匹配一个或多个数字，i表示不区分大小写（可根据需求移除）。

注意事项 #

• 确保目标元素的类名严格符合column-数字格式，避免混入额外字符；
• 方案1兼容性覆盖所有现代浏览器，方案2需Chrome、Firefox等主流新版本浏览器支持。

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