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

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

这似乎是classic case的using display: flex/inline-flex when you're not trying to create a flex layout within each element。对于块容器的内联（或水平）布局，请改用display: inline-block，display: table-cell或浮点数。

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

1 个答案: