为什么:: first-letter在我添加显示内容后立即停止工作:flex或inline-flex? [英] Why does ::first-letter stop working as soon as I add display: flex or inline-flex?

问题描述

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

I've implemented some ::first-letter styles for my p elements. However, when I add display: inline-flex to make them inline, all the ::first-letter styles stop working.

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

How can I make the elements inline while keeping the ::first-letter styles?

 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%;
}

推荐答案

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

A flex container (that is, an element with display: flex or display: inline-flex) cannot contain a ::first-letter pseudo-element, since a flex container contains flex items, not formatted lines. That's why making your p elements flex containers disables all your ::first-letter rules.

这似乎是经典案例在使用display: flex/inline-flex时使用href ="https://stackoverflow.com/questions/42848799/purpose-making-div-inline-should-display-be-inline-flex-or-inline-block">您并不是要在每个元素中创建一个弹性布局.对于块容器的内联(或水平)布局，请改用display: inline-block，display: table-cell或浮点数.

This appears to be the classic case of using display: flex/inline-flex when you're not trying to create a flex layout within each element. For inline (or horizontal) layout of block containers, use display: inline-block, display: table-cell, or floats, instead.

这篇关于为什么:: first-letter在我添加显示内容后立即停止工作:flex或inline-flex?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！