如何选择css中的所有孩子？

Question

可以说我有一个包含大量UI元素的包装器class="wrapper".

HTML就像:

<div class="wrapper">
   / a lot of other elements
</div>

现在我需要选择每个元素,我这样做:

.wrapper > .first_element_class{}
.wrapper > .second_element_class{}
...

有没有办法选择所有包装儿童一行？像这样的东西:

.wrapper{
   .first_class{}
   ...
}

Answer 1

如果你不知道你将拥有哪个元素/类,你可以使用通用选择器 *

像这样的东西:

.wrapper>* {
  color: red
}

<div class="wrapper">
  <div class="test">this is red</div>
  <span>this is red</span>
  <section>this is red</section>
</div>

Answer 2

您可以使用空格来匹配元素的所有后代。

.wrapper * {
  color: black;
}

请注意，如果您需要的话，这将递归地选择所有子项及其孙子项。可能是一个相当昂贵的操作，具体取决于您嵌套了多少标记元素.wrapper。