相同元素或后代的 CSS 组合器

Question

是否有一个CSS选择器组合器用于选择同一元素或任何后代中的两个类。例如：

<div class="theme-classic btn"></div>

或：

<div class="theme-classic">
  <div>
    <div class="btn"></div>
  </div>
</div>

如果在我的CSS文件中我写：

.theme-classic.btn

我不选择后代。

如果在我的CSS文件中我写：

.theme-classic .btn

我不会选择类位于同一元素上的第一种情况。

当然，我可以这样做：

.theme-classic.btn,
.theme-classic .btn { ... }

但我找不到兼具这两种功能的组合器。

Answer 1

CSS 中不存在这种情况。

您需要像您提到的那样分别选择它们：

.theme-classic.btn,
.theme-classic .btn { 
    ... 
}

Answer 2

CSS 嵌套可以帮助您简化选择器并避免重复

.theme-classic

.theme-classic {
   :is(& .btn,&.btn) {
     color: red;
   }
}

<div class="theme-classic btn">Select</div>
<div class="theme-classic"> Don't select</div>
<div class="btn"> Don't select</div>
<div class="theme-classic">
  <div>
    <div class="btn">Select</div>
    <div >Don't Select</div>
  </div>
</div>