是否可以明确地为匿名的flex项目设置样式？

Question

我正在初步了解基本的flexbox概念。MDN上的使用CSS Flexible Boxes文章指出（重点在于）：

每个flex容器的子元素都成为一个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> 标签中进行布局，这太棒了，但是，是否有一种方法可以对它们应用常规样式？ 伪元素或类似的东西？例如，我是否可以为段落分成的三个部分中的每一个设置不同的颜色？

- Álvaro González

Answer 1

不，匿名框不能直接被CSS样式定位。CSS样式需要在HTML中找到“钩子”来附着。而这个钩子就是HTML标签。如果没有标签，CSS就无法定位。这个概念适用于所有的盒模型，包括flex和block格式上下文。

---

关于匿名框的更多信息：

来自CSS规范：

9.2.2.1 匿名内联框

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

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

4. Flex项目

flex容器的每个流动子项都成为一个flex项目，并且直接包含在flex容器中的每个连续文本运行都被包装在一个匿名的flex项目中。

- Michael Benjamin

---

现在我想想，这确实有道理。 - Álvaro González

这就是它们被称为“匿名”盒子的原因。 - BoltClock

所以，它是直接包含在 flex 容器中的文本节点的虚拟容器？是这样吗？谢谢！ - tonix

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>

- Johannes

---

感谢您提供的实验性证明。在您回答时，我终于在最显然的地方（W3C建议）找到了一个参考文献，我已经添加了一个带有链接的答案。 - Álvaro González

Answer 3

不，这是不可能的。

W3C 候选推荐表示:

还要注意，由于没有元素可分配样式规则，匿名项目框不可样式化。但其内容将继承来自 flex 容器的样式（如字体设置）。

- Álvaro González

Answer 4

答案仍然是否定的，但有一个经常需要的“补充”

display: flex 对于子元素的影响比对样式化元素本身的影响更大（它将是块状的，或者无论其父元素和flex:属性（而不是值）所规定的是什么）。此外，相应的align-items: center实际上会影响子元素。

简述：匿名内部元素受到flex样式的影响，表现得像一个独立的元素（但不会受其他元素的样式尝试影响）Codepen

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

Sass：

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

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

  * // affects only actual tags
    background: cyan

- Frank N