css - 是否可以显式设置匿名 flex 元素的样式？

Question

我正处于掌握基本 flexbox 概念的早期阶段。 Using CSS Flexible Boxes MDN 上的文章(强调我的):

Each child of a flex container becomes a flex item. Text directly contained in a flex container is wrapped in an anonymous flex item.

这意味着以下标记会自动提供三个可玩的元素:

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 中附加一个“钩子(Hook)”。那个钩子(Hook)是一个 HTML 标签。没有标签，CSS 就没有目标。此概念适用于盒模型，包括flex 和block 格式化上下文。

---

关于匿名框的更多信息:

来自 CSS 规范:

9.2.2.1 Anonymous inline boxes

Any text that is directly contained inside a block container element must be treated as an anonymous inline element.

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

4. Flex Items

Each in-flow child of a flex container becomes a flex item, and each contiguous run of text that is directly contained inside a flex container is wrapped in an anonymous flex item.