我試圖得到：當有其他元素在那裏工作的第一個字母，可能嗎？獲取：首字母忽略圖像？

我創建了一個jsfiddle來說明。

<h3 class="title"> 
<img src="/imgs/small-logo.png" width="31" height="30" /> 
Test 
</h3> 
<h3 class="title"> 
Test 
</h3>

無論如何使用：第一類型或某事，但我不能讓它忽略img。

唯一的另一種方法是包裹在一個跨度和風格的信，但我並不熱衷於分離當屏幕崩潰也是如此下面的字其餘..

來源

2014-02-28 user4630

感謝球員，他們連同[這個例子]工作[1] [1]：http://stackoverflow.com/questions/15840198/ pfirst-child-doesnt-work-if-a-img-tag-is-immediately-after-the-p-tag – user4630

通過h3.title應用徽標{background-image et al。？ –

如果你很高興，以適應您的加價，你可以一個跨度內換你整個字符串文本。

HTML：

<h3 class="title"> 
    <img src="/imgs/small-logo.png" width="31" height="30" /> 
    <span>Test</span> 
</h3> 

<h3 class="title"> 
    <span>Test</span> 
</h3>

CSS：

h3.title { 
    color: #004265; 
} 
h3.title span { 
    display: inline-block; 
} 
h3.title span:first-letter { 
    color: red; 
}

:first-letter只能在塊級元素，因此跨度設定爲inline-block。

這裏是工作的代碼 - JsFiddle

來源

2014-02-28 14:10:31 Jonathan

你可以試着改變圖像的位置，它涉及的文本之後，然後在圖像上使用float: left：

http://jsfiddle.net/chrissp26/mp4UH/1/

來源

2014-02-28 14:02:30

看一看here on MDN

::首字母CSS僞元素選擇塊的第一行的第一個字母，前提是該行的前面沒有任何其他內容（如圖像或行內表格）。

我能想到的唯一可能的解決方案是浮動圖像，使其逃脫這個規則，例如，

h3.title img{ 
    float:left; 
}

Fiddle

來源

2014-02-28 14:03:16 SW4

如果它是一個標誌，那麼它的造型和使用僞元素將優於實際圖像。或者甚至只是添加填充並在標題元素上使用徽標作爲bg圖像。 –

獲取：首字母忽略圖像？

回答

Fiddle

相關問題