css - CSS选择另一个元素的多个后代

Question

是否可以在 CSS 中选择具有某个类、id 等祖先的多个元素？例如：

table.exams caption, tbody, tfoot, thead, tr, th, td

如果没有，有没有办法选择该元素的所有后代？

Answer 1

是否可以在 CSS 中选择具有某个类、id 等祖先的多个元素？

现在可以使用:is()伪类来实现这一点，它起源:matches()于下面这个答案的原始版本中提到的。确保不要将其与 混淆:where()，这会消除对选择器至关重要的特殊性：

table.exams :is(caption, tbody, tfoot, thead, tr, th, td)

---

之前，如果不复制整个祖先选择器并指定所有后代¹:is()，这是不可能的：

table.exams caption, 
table.exams tbody, 
table.exams tfoot, 
table.exams thead, 
table.exams tr, 
table.exams th, 
table.exams td

直到 Selectors 3 最终确定后，他们才提出了一个伪类符号来执行此操作，并且直到最近才开始出现基本实现。请参阅此答案以获取一些历史课程。

简而言之，现在进入标准的伪类称为:matches(). 在遥远的将来，一旦浏览器开始实现:matches()，您将能够执行以下操作：

table.exams :matches(caption, tbody, tfoot, thead, tr, th, td)

---

¹ _{特别是表，你可以逃脱table.exams > :not(colgroup), table.exams > * > tr > *，但正如你所知，这是非常神秘的（更不用说它假设你在这个表中没有脚本支持元素或嵌套表），你最好只列出所有您明确想要的后代。}

Answer 2

您现在可以使用:is()选择器执行此操作。如果它需要更大的选择，您可以将较小的比率:not与它结合使用，如代码片段中所示：

此选择器可用于所有 4 种主要浏览器（Edge、Firefox、Chrome 和 Safari）的最新版本：https ://caniuse.com/?search=截至 26/1/2021。

.match-elements :is(.match-1,.match-2,.match-5,.match-10) {
  background: #5548B0;
}

.match-elements :not(:is(.match-1,.match-2,.match-5,.match-10)) {
  background: #BADA55;
}

/* For snippet styling, not required */

.match-elements div {
  font-family: sans-serif;
  font-weight: 600;
  color: white;
  padding: 10px;
  margin: 10px 0;
}

<div class="match-elements">
  <div class="match-1">Matched using is</div>
  <div class="match-2">Matched using is</div>
  <div class="match-3">Matched using not</div>
  <div class="match-4">Matched using not</div>
  <div class="match-5">Matched using is</div>
  <div class="match-6">Matched using not</div>
  <div class="match-7">Matched using not</div>
  <div class="match-8">Matched using not</div>
  <div class="match-9">Matched using not</div>
  <div class="match-10">Matched using is</div>
</div>

Answer 3

是否可以在 CSS 中选择具有某个类的祖先的多个标签？

可以使用 SCSS 实现类似于 :matches 的结果，如本文所示

此外，某些浏览器部分支持:matches供应商特定前缀。