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

Question

我已经::first-letter为我的p元素实现了一些样式。但是，当我添加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元素 flex 容器禁用所有::first-letter规则。

这似乎是对经典案例的使用display: flex/inline-flex当你不想要创建的每个单元内的柔性布局。对于内联（或水平）块的容器，使用的布局display: inline-block，display: table-cell或浮筒，来代替。