css – 是否可以显式设置匿名弹性项的样式?

前端之家收集整理的这篇文章主要介绍了css – 是否可以显式设置匿名弹性项的样式?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正处于掌握基本flexBox概念的早期阶段. MDN的 Using CSS Flexible Boxes文章(强调我的):

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>中包装“这是一个”和“一个测试”.布局的标签但是,有没有办法将常规样式应用于它们?一个伪元素或类似的东西?例如,我可以为段落分为三个部分中的每一部分设置不同的颜色吗?

解决方法

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

猜你在找的CSS相关文章