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

Question

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

我想象的 CSS 如下所示(其中 :subtree 部分是我编造的)。

.diagram:subtree
{
    ...
}

当我编写如下 HTML 时，<div>并且应该选择其中的每个元素。

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

Answer 1

只需使用 descendant selector (空格):

.diagram * { … }

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

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

.diagram, .diagram * { … }

引用规范:

At times, authors may want selectors to match an element that is the descendant of another element in the document tree (e.g., "Match those EM elements that are contained by an H1 element"). Descendant selectors express such a relationship in a pattern. A descendant selector is made up of two or more selectors separated by white space. A descendant selector of the form "A B" matches when an element B is an arbitrary descendant of some ancestor element A.