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

Question

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

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

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

Answer 1

Is it possible to select multiple elements that have an ancestor of a certain class, id, etc in CSS?

现在可以使用 :is() pseudo-class ，起源于下面这个答案的原始版本中提到的 :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 定稿后，他们才提出了一个伪类符号来执行此操作，直到最近才开始出现基本实现。参见 this answer上一堂历史课。

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

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

---

¹ _{特别是表格，你可以使用 table.exams > :not(colgroup), table.exams > * > tr > *，但正如您所知，这是非常神秘的(更不用说它假设您没有 script-supporting elements 或该表中的嵌套表)并且您最好只明确列出您想要的所有后代。}