纯CSS中如何调整选择器解决媒体查询的.no-menu样式特异性问题

背景 #

以下CSS规则用于多个网站共享的主题。部分网站有菜单项，部分没有。这些样式应用于带有header类的元素，直到该元素被JS Web组件挂载，之后它会有多个子元素，因此不再受这些样式影响。没有菜单的网站会额外添加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;
  }
}

/* 小屏幕下汉堡导航出现，需要给两种版本应用no-menu样式 */
@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 #

嵌套重复声明内容：

@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;
    }
  }
}

最优无重复方案 #

可以通过在:is()中嵌套:is()来一次性覆盖带.no-menu和不带的情况，完全避免选择器或声明内容的重复：

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

原理说明 #

• 外层:is(.header:empty,.header:has(div:only-child))匹配目标基础元素
• 内层:is(.no-menu, :not(.no-menu))匹配所有带或不带.no-menu类的元素，相当于对基础元素的全量覆盖
• 整个选择器的特异性与原.no-menu嵌套规则完全一致，同时因为处于媒体查询内，优先级足够覆盖原有样式

如果追求极致简洁，还可以用:where()替代内层:is()（不会额外增加特异性，依赖媒体查询的顺序优先级）：

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

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