css - 选择子树中的所有元素

Question

如何使 CSS 选择器匹配标有某个类的元素的子树中的所有元素？

我正在想象 CSS 如下所示（其中:subtree部分是我在编造的东西）。

.diagram:subtree
{
    ...
}

当我像下面这样编写 HTML<div>时，应该选择其中的每个元素。

<div class="diagram">
    ...
</div>

Answer 1

只需使用后代选择器（空格）：

.diagram * { … }

diagram这将选择应用了该类的任何元素下方的每个元素。

要匹配 div 本身及其后代，请使用grouping：

.diagram, .diagram * { … }

引用规范：

有时，作者可能希望选择器匹配一个元素，该元素是文档树中另一个元素的后代（例如，“匹配 H1 元素包含的那些 EM 元素”）。后代选择器以模式表达这种关系。后代选择器由两个或多个用空格分隔的选择器组成。当元素 B 是某个祖先元素 A 的任意后代时，“A B”形式的后代选择器匹配。

Answer 2

.diagram, .diagram *

这将选择 div .diagram。空格是后代选择器，*是所有元素。

编辑：我认为您的问题最初是说“包括元素”，因此.diagram,如果需要，您可以简单地删除它。

Answer 3

只需使用此代码即可.diagram * {}