我該如何製作CSS：不是標記/ HTML標記功能的第一個字母？

很簡單，我需要使<p>中的第一個字母爲不同的顏色，但在某些時間之前有一個圖像在該字母之前。有沒有辦法讓:first-letter適用於非HTML標籤？我該如何製作CSS：不是標記/ HTML標記功能的第一個字母？

CSS：

p:first-letter { 
    color: red; // this should make the "W" red" 
}

HTML：

<p><img src="will.jpg">West Philadelphia, Born And Raised</p>

來源

2012-05-30 Tiny

如果將文本放在span元素中並將css更改爲'p> span：first-letter'，會發生什麼？ – h2ooooooo

這是不可能的。它是數據庫驅動的內容，內容由許多用戶以所見即所得的形式創建。有些會有加價，所以不會。 – Tiny

它的PHP或什麼？ –

這不適用於CSS。您需要更改HTML的建議或做一些JavaScript黑客：

找到段落的第一個孩子IMG元素
它們移動到段落
年底應用在他們的樣式定義出現之前，文字

來源

2012-05-30 09:18:09 sceid

或者用Javascript動態地將第一個字母/單詞用上面提到的span標籤（上面）包裹起來。因此，您可以保持圖像不變。 – Michael

真的，這可能更容易 – sceid

謝謝。我會看看其他的選擇。 – Tiny

「第一次」是指第一。將您的HTML更改爲：

<p>West Philadelphia, Born And Raised<img style="float:left;" src="will.jpg" /></p>

來源

2012-05-30 09:10:03 hasentopf

正如Tiny指出的那樣，他使用wysiwyg並且無法控制來源 –

CSS：

.red_color { 
    color: red; 
}

HTML：

<img src="will.jpg"><span class='red_color'>W</span>est Philadelphia, Born And Raised

來源

2012-05-30 09:24:15 Guy

在第一個字母：後：僞類前沒有工作，所以我做了一個把戲你，我希望這將幫助你： -

p { 
    background:url(http://www.dummyimage.com/10x10/000/fff) no-repeat 0 3px; 
    text-indent:10px; 
    } 

p:first-letter { 
    color: red; 
    }

演示： - http://jsbin.com/uwemuy/3/edit

來源

2012-05-30 09:24:38

http://stackoverflow.com/editing-help – BoltClock

我該如何製作CSS：不是標記/ HTML標記功能的第一個字母？

回答

相關問題