Is it possible to style anonymous flex items explicitly?

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

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>

---

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.

---

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

---

No, it isn't possible.

The W3C Candidate Recommendation says:

Note also that the anonymous item's box is unstyleable, since there is no element to assign style rules to . Its contents will however inherit styles (such as font settings) from the flex container.

链接地址: http://www.djcxy.com/p/13194.html

上一篇: 在弹性盒内部块元素？

下一篇: 是否可以显式设计匿名弹性项目？