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

tmb3ates 于 2023-01-14 发布在其他

关注(0)|答案(2)|浏览(236)

假设我有一个class="wrapper"的大型UI元素的 Package 器。
HTML代码如下所示：

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

现在我需要选择每个元素，如下所示：

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

有没有办法用一行选择所有的 Package 器子级？类似于：

.wrapper{
   .first_class{}
   ...
}

2条答案

如果不知道将使用哪个元素/类，可以使用universal selector*
大概是这样的

.wrapper>* {
  color: red
}

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

可以使用白色来匹配元素的所有后代。

.wrapper * {
  color: black;
}

https://www.w3.org/TR/CSS21/selector.html#descendant-selectors
注意，如果你需要的话，这将递归地选择所有的子元素和它们的孙元素，根据你嵌套到.wrapper中的标记元素的多少，这可能是一个相当昂贵的操作。