2017-04-04 48 views
0

不久,我在CSS中爲「p」寫了任何東西,這個元素的丟棄消失並覆蓋了所有的「p」規則。重寫元素的CSS Inherance

難道這是固定的,以保持內聯和「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%; 
} 
+0

僅供參考:在FF中,這不是做任何事情:) – Martijn

+1

刪除inline-flex規則修復了這個問題,但我不知道爲什麼。你爲什麼使用inline-flex? – Ryan

回答

2

只要我在CSS中寫的 「P」 什麼

不,這是特定於您的display: inline-flex聲明。這不僅僅是「什麼」。

flex容器不能包含::first-letter僞元素,因爲flex容器包含flex項目而不是格式化的行。這就是爲什麼使您的p元素彎曲容器禁用所有::first-letter規則。

目前還不清楚爲什麼當您不想在每個段落中創建柔性佈局(並且最令人擔憂的是you would not be the first)時使用display: inline-flex。改爲使用display: inline-block,display: table-cell或浮點數。

+0

如果我使用diplay:inline-block解決了問題,但是上邊距消失了。 https://jsfiddle.net/Lfkf1dtx/1/ – Slasher