如何在CSS同一方括号内设置多种input类型样式？

可行，但CSS原生并不支持你设想的[type=date || week || month]这种多值逻辑或的属性选择器语法，不过可以通过以下几种方式实现选择器合并，缩减代码体积：

1. 使用:is()伪类（推荐） #

:is()伪类可以将多个选择器合并成一组，写法简洁且可读性高，是现代CSS的首选方案：

/* 简洁写法，用.tUI替代[class=tUI]更符合CSS规范 */
input.tUI:is([type=date], [type=month], [type=week], [type=time]) {
  background: red;
}

如果坚持使用属性选择器匹配class，也可以写成：

input[class=tUI]:is([type=date], [type=month], [type=week], [type=time]) {
  background: red;
}

说明：:is()支持所有现代浏览器（Chrome、Firefox、Safari 14.1+、Edge等），如果你的UI框架无需兼容IE等老旧浏览器，这是最优解。

2. 利用CSS预处理器（可选） #

如果你的项目使用Less/Sass等预处理器，可以用变量或混合宏进一步简化，比如Sass写法：

$input-types: date, month, week, time;

input.tUI[type=#{nth($input-types, 1)}],
@for $i from 2 through length($input-types) {
  input.tUI[type=#{nth($input-types, $i)}]
} {
  background: red;
}

编译后会自动生成逗号分隔的选择器，但这需要依赖预处理器编译，属于间接实现。

注意事项 #

• 避免使用[class=tUI]这种写法，它只会匹配仅拥有tUI这一个class的元素，而.tUI可以匹配所有包含tUI类的元素，灵活性更强。
• 如果必须兼容极低版本浏览器，只能继续使用逗号分隔的原生选择器，这是最兼容的写法。

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