您可以选择将类应用于复杂选择器而不重复复杂选择器或声明吗？

Question

背景

以下 CSS 规则用于多个站点共享的主题。有些网站有菜单项，而其他网站则没有。这些样式是在 JS Web 组件最终安装之前应用于具有

header

类的元素，之后它将拥有多个子元素，因此不会受到样式的影响。没有菜单的网站也会附加

no-menu

类。

只是没有预处理器的普通 CSS。

问题

我有以下 CSS 规则：

:is(.header:empty,.header:has(div:only-child)) {
  --header-min-height: 114px;
  --header-title-height: 63px;
  &.no-menu {
    --header-min-height: 101px;
    --header-title-height: 50px;
  }
}

/* If on a smaller screen, a hamburger nav appears, so
   apply the "no-menu" styles to both versions. */
@media (max-width: 1100px) {
  :is(.header:empty,.header:has(div:only-child)) {
    --header-min-height: 101px;
    --header-main-gradient: 50px;
  }
}

由于特殊性，媒体查询规则不会影响较小屏幕上的

no-menu

变体。

有没有办法通过操作选择器来调整媒体查询包含的规则来解决这个问题排他地并且不引入重复信息？

以下解决方案解决了问题，但引入了我想避免的重复。

错误的解决方案1

复制选择器并将

.no-menu

添加到其末尾：

@media (max-width: 1100px) {
  :is(.header:empty,.header:has(div:only-child)),
  :is(.header:empty,.header:has(div:only-child)).no-menu {
    --header-min-height: 101px;
    --header-main-gradient: 50px;
  }
}

错误的解决方案2

添加嵌套 CSS 规则

&.no-menu { ... }

（重复声明）：

@media (max-width: 1100px) {
  :is(.header:empty,.header:has(div:only-child)) {
    --header-min-height: 101px;
    --header-main-gradient: 50px;
    &.no-menu {
      --header-min-height: 101px;
      --header-main-gradient: 50px;
    }
  }
}

Answer 1

在实验时偶然发现了这个解决方案，并惊讶于它的工作原理。

我自己认为，在理想的情况下，您将能够利用 CSS 嵌套，但将嵌套规则应用于当前范围以及类的上下文。事实证明，您可以使用

:scope

和

:is()

来实现此目的：

@media (max-width: 1100px) {
  :is(.header:empty,.header:has(div:only-child)) {
    &:is(:scope,.no-menu) {
      --header-min-height: 101px;
      --header-main-gradient: 50px;
    }
  }
}