如何用CSS选择器批量选中name属性不同的radio元素？

针对多个带.radio类但name属性不同的单选框选择器冗长问题，有几种更简洁的处理方式：

1. 直接使用类选择器（最简洁） #

如果所有需要设置样式的单选框都带有.radio类，且不需要排除其他同类型元素，直接用类选择器即可：

.radio {
  /* 你的样式代码 */
}

这是最直接的方案，完全替代冗长的多属性选择器组合。

2. 属性前缀/包含匹配（适合name有规律的情况） #

如果单选框的name属性有统一规律，比如都以value开头，可以用属性前缀匹配选择器：

.radio[name^='value'] {
  /* 你的样式代码 */
}

• ^= 表示匹配属性值以指定字符串开头的元素
• 如果name包含特定关键词（比如都有val片段），可以用*=（包含匹配）：

.radio[name*='val'] {
  /* 你的样式代码 */
}

3. 用CSS预处理器简化（适合name无规律但数量多的情况） #

如果name没有统一规律但数量很多，可以借助Sass/LESS这类预处理器的循环功能来维护：
比如Sass写法：

// 维护需要选择的name列表
$radio-names: 'value1' 'value2' 'value3';

// 循环生成选择器
@each $name in $radio-names {
  .radio[name='#{$name}'] {
    /* 你的样式代码 */
  }
}

编译后会自动生成逗号分隔的完整选择器，你只需要维护$radio-names列表即可，避免手动写大量重复代码。

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