为什么 ::first-letter 在我添加 display: flex 或 inline-flex 后立即停止工作？

Question

我已经为 p 元素实现了一些 ::first-letter 样式。但是，当我添加 display: inline-flex 使它们内联时，所有 ::first-letter 样式都停止工作。

如何在保持 ::first-letter 样式的同时使元素内联？

 p:first-of-type::first-letter {
    font-size: 25px;
    font-weight: bold;
 }

 p:nth-of-type(2)::first-letter {
    font-size: 25px;
    font-weight: bold;
 }

  p:nth-of-type(3)::first-letter {
    font-size: 25px;
    font-weight: bold;
 }

/* inline container */
p {                               
    display: inline-flex;
    width: 33%;
}

Answer 1

弹性容器（即具有 display: flex 或 display: inline-flex 的元素）不能包含 ::first-letter 伪元素，因为弹性容器包含弹性项目，而不是格式化行.这就是为什么使 p 元素成为弹性容器会禁用所有 ::first-letter 规则。

这似乎是 classic case of 。对于块容器的内联（或水平）布局，请改用 display: inline-block、display: table-cell 或浮动。

为什么 ::first-letter 在我添加 display: flex 或 inline-flex 后立即停止工作？

Why does ::first-letter stop working as soon as I add display: flex or inline-flex?

html

css

pseudo-element

flexbox