오버라이드 된 엘리먼트의 CSS 상속

Question

곧 "p"에 대해 CSS에 쓰는대로,이 엘리먼트의 상속은 사라지고 모든 "p"규칙을 오버라이드합니다.

"p"요소의 인라인 및 스타일을 유지하려면이 문제를 해결할 수 있습니까?

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

곧 내가 CSS에서 "P"아무것도 쓰기로

아니,이 당신의 display: inline-flex 선언에 따라 다릅니다. 그것은 단지 "아무것도"가 아닙니다.

플렉스 컨테이너에 포맷 된 선이 아닌 플렉스 항목이 포함되어 있기 때문에 플렉스 컨테이너에 ::first-letter 의사 요소를 포함 할 수 없습니다. 그래서 p 요소를 플렉스 컨테이너로 만들면 모든 ::first-letter 규칙이 사용 중지됩니다.

display: inline-flex을 사용하는 이유는 명확하지 않습니다. 각 단락에서 플렉스 레이아웃을 만들려고하지 않을 때 (가장 놀랍게도 you would not be the first). 대신 display: inline-block, display: table-cell 또는 부동 소수점을 사용하십시오.