是否可以显式设置匿名弹性项目的样式? [英] Is it possible to style anonymous flex items explicitly?

问题描述

我正处于掌握基本 flexbox 概念的早期阶段.MDN 上的 使用 CSS 弹性框 文章指出(强调我的):

I'm in the early stages of grasping the basic flexbox concepts. The Using CSS Flexible Boxes article at MDN states (emphasis mine):

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

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

这意味着以下标记会自动提供三个项目供您使用:

That means that the following mark-up automatically provides three items to play with:

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 模型本身之外的可能性(如果有的话).不需要将This is a"和a test"包装在伪造的 <span> 标签中进行布局真是太棒了，但是，有没有办法将常规样式应用于它们?伪元素或类似的东西?例如，我可以为段落分成的三个部分中的每一个设置不同的颜色吗?

However, I'm still unsure about the possibilities of these anonymous items outside flexbox model itself (if any). It's awesome not to need to wrap "This is a" and "a test" in bogus <span> tags for layout but, is there a way to apply regular styles to them? A pseudo-element or something similar? Could I, for instance, set a different colour to each one of the three parts the paragraph is divided into?

推荐答案

没有.匿名框不能直接针对 CSS 样式.CSS 样式需要在 HTML 中附加一个钩子".那个钩子是一个 HTML 标签.没有标签，CSS 就没有目标.这个概念适用于盒模型，包括 flex 和 block 格式化上下文.

No. Anonymous boxes cannot be directly targeted for CSS styling. CSS styles need a "hook" in the HTML to attach to. That hook is an HTML tag. Without the tag, CSS has nothing to target. This concept applies across box models, including flex and block formatting contexts.

关于匿名框的更多信息:

More about anonymous boxes:

来自 CSS 规范:

9.2.2.1 匿名内联盒子

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

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

Flexbox 规范提供了类似的行为.

The flexbox specification provides for similar behavior.

4.弹性项目

flex 容器的每个 in-flow 子元素都变成了一个 flex item，并且每个直接包含在 flex 中的连续文本容器被包裹在一个匿名的弹性项目中.

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.

这篇关于是否可以显式设置匿名弹性项目的样式?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！