能否在CSS中实现类似媒体查询的父类范围规则批量应用？

目前CSS原生并不支持你设想的这种类似媒体查询的@media (class: .home-page)语法，没办法直接通过这种方式给代码块内的所有规则自动添加父类选择器前缀。不过有几种替代方案可以实现你想要的效果：

1. 原生CSS嵌套（推荐） #

现在主流浏览器已经支持原生CSS嵌套语法，写法和你设想的逻辑一致，直接把目标选择器嵌套在父类选择器内部，最终会自动生成带父类前缀的选择器规则：

.home-page {
  h1 {
    /* 仅.home-page下的h1生效的样式 */
    color: #ff4500;
  }
  .banner-title {
    /* 仅.home-page下的.banner-title生效的样式 */
    font-size: 2.5rem;
  }
}

这段代码会被浏览器解析为.home-page h1和.home-page .banner-title的标准CSS规则，完全满足“仅当DOM存在.home-page父类时样式生效”的需求。

2. CSS预处理器嵌套（兼容旧环境） #

如果需要兼容不支持原生嵌套的旧浏览器，可以用Sass、Less这类预处理器，它们很早就支持嵌套语法，写法和原生类似，编译后会输出标准CSS：

// Sass示例
.home-page {
  h1 {
    color: #ff4500;
  }
  .banner-title {
    font-size: 2.5rem;
  }
}

编译后输出：

.home-page h1 { color: #ff4500; }
.home-page .banner-title { font-size: 2.5rem; }

3. CSS变量+父类触发 #

如果不想写嵌套结构，可以用CSS变量控制样式，在父类中重新定义变量，目标元素通过引用变量实现样式切换：

// 全局默认样式
h1 { color: #333; }
.banner-title { font-size: 2rem; }

// .home-page存在时覆盖变量
.home-page {
  --h1-color: #ff4500;
  --banner-font-size: 2.5rem;
}

// 应用变量的规则
.home-page h1 { color: var(--h1-color); }
.home-page .banner-title { font-size: var(--banner-font-size); }

这种方式适合样式依赖变量的场景，能避免重复写复杂的选择器结构。

4. :has()选择器（特定场景可用） #

如果需要判断某个父容器的存在来影响全局元素，可以用:has()选择器（注意：部分旧浏览器不支持），比如当页面中存在.home-page时修改全局h1的样式：

body:has(.home-page) h1 {
  color: #ff4500;
}

不过这个是从父元素的存在反选其他元素，和直接给.home-page内部元素加样式的场景有所区别，按需使用即可。

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