CSS如何无需重复代码选中多个父元素的直接子元素

你期望的(.parent1, .parent2, ...) > child括号分组简写语法，在已全量兼容的正式CSS标准中没有原生对应写法，但可以通过以下方案实现不重复编码的同等选择效果：

• 现代原生CSS方案：使用:is()伪类
  这是CSS选择器Level 4标准正式纳入的能力，逻辑和你期望的分组写法完全一致：

  :is(.parent1, .parent2, .parent3) > child {
    /* 填写你的样式规则 */
  }
  

  注意：:is()的选择器优先级由括号内优先级最高的选择器决定，和传统逗号分隔分组各选择器独立计算优先级的逻辑有细微差异。目前Chrome 88+、Firefox 78+、Safari 14+及以上版本的现代浏览器均已支持该写法。
• 零优先级原生CSS方案：使用:where()伪类
  语法和:is()完全一致：

  :where(.parent1, .parent2, .parent3) > child {
    /* 填写你的样式规则 */
  }
  

  它和:is()的唯一区别是自身优先级为0，不会干扰后续样式覆盖的权重计算，适合编写基础全局样式、重置样式的场景，兼容性和:is()基本对齐。
• 预处理器方案（项目已接入Sass/Less等预处理器时可用）
  直接用预处理器的嵌套语法即可，编译阶段会自动展开为你提到的逗号分隔标准写法，不需要手动重复编码：

  /* 以SCSS写法为例 */
  .parent1, .parent2, .parent3 {
    > child {
      /* 填写你的样式规则 */
    }
  }
  

注意：你示例中直接写括号包裹选择器组的写法不属于标准CSS语法，直接在原生CSS文件中使用会被浏览器直接忽略，无法生效。

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