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

【问题标题】：Easiest way to select all elements of a Flex Container? [duplicate]选择 Flex 容器的所有元素的最简单方法是什么？ [复制]
【发布时间】：2018-05-31 18:09:53
【问题描述】：

例如，选择 flexbox 容器的所有子元素并赋予它们相同的边距的最简单方法是什么？

例子：

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

【问题讨论】：

.flexboxcontainer > *
.flexboxcontainer * 使用这个 CSS 内部所有元素选择和 .flexboxcontainer > * 选择 instaed 子项。

标签： css css-selectors flexbox

【解决方案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>

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

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

【讨论】：