是否可以显式地设置匿名弹性项目的样式？

Question

我正处于掌握基本 flexbox 概念的早期阶段。 MDN 上的Using CSS Flexible Boxes 文章指出（强调我的）：

弹性容器的每个子容器都成为弹性项目。 直接包含在 flex 容器中的文本被包裹在一个匿名的 flex 项中。

这意味着以下标记会自动提供三个可玩的项目：

p, em {
  margin: 1em;
  padding: 1em;
}
p {
  border: 1px solid blue;
  display: flex;
  justify-content: space-between;
  
}
em {
  border: 1px solid orange;
  display: inline-flex;
}

<p>This is a <em>just</em> a test.</p>

但是，我仍然不确定这些匿名项目在 flexbox 模型本身之外的可能性（如果有的话）。不需要在伪造的 <span> 标签中包含“这是一个”和“一个测试”来进行布局真是太棒了，但是，有没有办法对它们应用常规样式？伪元素或类似的东西？例如，我可以为段落分成的三个部分中的每一个设置不同的颜色吗？

Answer 1

没有。匿名框不能直接作为 CSS 样式的目标。 CSS 样式需要附加到 HTML 中的“钩子”。该钩子是一个 HTML 标记。没有标签，CSS 就没有目标。这个概念适用于盒子模型，包括 flex 和 block 格式化上下文。

---

更多关于匿名盒子：

来自 CSS 规范：

9.2.2.1 Anonymous inline boxes

直接包含在块容器元素中的任何文本 必须被视为匿名内联元素。

flexbox 规范提供了类似的行为。

4. Flex Items

弹性容器的每个流入子容器都成为弹性项目，并且每个 直接包含在 flex 中的连续文本 容器被包裹在一个匿名的弹性项目中。

Answer 2

显然不是，否则下面示例中的所有文本都必须像单词“just”一样设置样式：

p,
em {
  margin: 1em;
  padding: 1em;
}

p {
  border: 1px solid blue;
  display: flex;
  justify-content: space-between;
}

em {
  border: 1px solid orange;
  display: inline-flex;
}

p * {
  color: green;
  font-size: 2em;
}

<p>This is a <em>just</em> a test.</p>

Answer 3

不，这是不可能的。

W3C Candidate Recommendation 说：

还请注意，匿名项目的框是无法设置样式的，因为有 没有可分配样式规则的元素。然而，它的内容将继承 来自 flex 容器的样式（例如字体设置）。

Answer 4

答案仍然是“不”，但有一点但经常需要的“补充”

display: flex 对 children 的影响比对样式元素本身的影响更大（这将是块，或者任何它的父元素和 flex:-property（非值）指示）。还有伴随的align-items: centeractually affects孩子们。

tl;博士;匿名内部元素受 flex 样式 的影响，表现得像一个独立的元素（只是不受其他样式尝试的影响）。 Codepen

<i> + <div> hello </div><div> there </div></i>

萨斯：

i
  background: #faa
  padding: 12
  padding: 0 20px
  height: 100px

  // affects innner text
  display: flex
  align-items: center

  * // affects only actual tags
    background: cyan