p：如果img標籤緊跟在p標籤之後，第一個孩子不起作用？

Question

海蘭那裏， 不能讓它工作，我有這樣的事情

.body-post p:first-child:first-letter 
    { 
    font-size:240%; 
    } 

，這裏的HTML：

<div class="body-post"> 
    <p><img src="http://#" align="left" style="margin-right:5px;"/> 
    some text</p></div> 

所以，如果世界上沒有圖片的第一個字母的作品。有沒有辦法跳過img標籤。我不能編輯源代碼，因爲我正在做一個博主域的模板。沒有什麼嚴肅的，它只是如此混亂。第一個字母應該選擇字母而不是圖像。

Answer 1

經過一點research我發現第一個字母只能用於塊元素（你正在做的）。

在這個解決方案，我在一個跨度它包裝增加了文字的選擇性，並把在適當的造型，使跨度的inline-block的

http://jsfiddle.net/52Vjm/1/

<div> 
    <p> 
     <img src="http://placekitten.com/100/100"/> 
     <span>Kittens are great</span> 
    </p> 
</div> 

span:first-letter { font-size:2em; } 
span { display:inline-block; } 
img { margin-right:5px; } 

Answer 2

將圖片放在P標籤的旁邊並使用以下內容。圖像仍然允許P包裝，因爲這是一個元素的浮動。

.body-post > p:first-child:first-letter { 
    font-size:240%; 
} 

    <div class="body-post"> 
    <img src="http://#" align="left" style="margin-right:5px;"/> 
    <p>some text</p> 
</div> 

//注意，儘量避免在可能的情況下使用內聯樣式。它可以干擾JS和媒體查詢/