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

Question

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

  

Flex容器的每个子项都变为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>标签中包装“This is a a”和“a test”，但有没有办法将常规样式应用于它们？一个伪元素或类似的东西？例如，我可以为段落分为三个部分中的每一个设置不同的颜色吗？

Answer 1

显然不是，因为否则以下示例中的所有文本都必须像“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 2

没有。匿名框不能直接针对CSS样式。 CSS样式需要HTML中的“钩子”才能附加到。该钩子是一个HTML标签。没有标签，CSS没有任何目标。此概念适用于框模型，包括 flex 和块格式化上下文。

Answer 3

不，这是不可能的。

W3C Candidate Recommendation说：

  

另请注意，匿名项目的框不可自由，因为有   没有要将样式规则分配给的元素。然而它的内容将继承   Flex容器中的样式（如字体设置）。

Answer 4

答案仍然是“否”，只是一些但经常需要的“加法”

display: flex对子元素的影响要大于样式元素本身（将是块元素，或者是其父元素和flex:属性（不是值） ）指示）。以及伴随的align-items: center actually affects 孩子。

tl; dr;匿名内部元素受 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