选择Flex容器的所有元素的最简单方法是什么？ [重复]

Question

这个问题在这里已有答案：

• Select all child elements recursively in CSS 2回答

选择flexbox容器的所有子元素并为它们提供所有相同边距的最简单方法是什么？

例：

<div class="flexboxcontainer">
<h1>Headline</h1>
<p>Some Text</p>
<div>Some more text</div>
<p class="smalltext">Some small text</p>
</div>

Answer 1

要选择直接子项（flex容器的1级子项）：

.flexboxcontainer {
  display: flex;
}

.flexboxcontainer>* {
  /*Select only 1 level children */
  padding: 20px;
  border: 2px solid black;
}

<div class="flexboxcontainer">
  <h1>Headline</h1>
  <p>Some Text</p>
  <div>Some more text
    <h3>Random stuff</h3>
  </div>
  <p class="smalltext">Some small text
    <span>Additional text</span>
  </p>
</div>

要选择所有子项，即后代（flex容器的所有级别子级）：

.flexboxcontainer {
  display: flex;
}

.flexboxcontainer * {
  /*Select all level children */
  padding: 20px;
  border: 2px solid black;
}

<div class="flexboxcontainer">
  <h1>Headline</h1>
  <p>Some Text</p>
  <div>Some more text
    <h3>Random stuff</h3>
  </div>
  <span class="smalltext">Some text
    <p>More text</p>
  </span>
</div>

Answer 2

.flexboxcontainer > * {
    /* You properties */
}

它与flex无关 - 您可以使用上面的选择器选择元素的所有直接子元素。

Answer 3

对于所有孩子.flexboxcontainer > * { ... }的直接孩子将是.flexboxcontainer * { ... }