如何简化多父类下子元素的CSS类选择器链式写法？

若HTML结构如下：

-section1
--h1
--h2
--h3
-section2
--h1
--h2
--h3
-section3
--h1
--h2
--h3
-section4
--h1
--h2
--h3

需求为给section1、section2、section3下的子元素设置相同样式，section4下的子元素设置不同样式，如何用简洁代码实现？

当前编写的代码如下：

.section1 .h1,
.section1 .h2,
.section1 .h3,
.section2 .h1,
.section2 .h2,
.section2 .h3,
.section3 .h1,
.section3 .h2,
.section3 .h3,{
     color: blue;
}

但这段代码过于冗长，请问是否有更简洁的写法？

方法1：使用原生CSS :is() 伪类（推荐，最简洁） #

:is() 伪类可直接对父容器和子元素进行分组，大幅精简代码，现代主流浏览器均支持：

:is(.section1, .section2, .section3) :is(.h1, .h2, .h3) {
  color: blue;
}

方法2：给目标section添加统一类（最易维护） #

若可修改HTML，给section1、section2、section3添加共同类名（如.shared-section），后续扩展或修改更灵活：

<!-- 修改后的HTML示例 -->
<section class="section1 shared-section">...</section>
<section class="section2 shared-section">...</section>
<section class="section3 shared-section">...</section>
<section class="section4">...</section>

对应的CSS：

.shared-section :is(.h1, .h2, .h3) {
  color: blue;
}

方法3：排除法（无需修改HTML） #

若所有section为同级元素，可用:not()伪类直接排除section4：

section:not(.section4) :is(.h1, .h2, .h3) {
  color: blue;
}

方法4：预处理器嵌套（如SCSS/Sass） #

如果项目使用CSS预处理器，可通过嵌套选择器简化编写：

.section1, .section2, .section3 {
  .h1, .h2, .h3 {
    color: blue;
  }
}

编译后会自动展开为你原本的冗长代码，但编写阶段更简洁。

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