3

簡単に言うと、最初の文字を<p>別の色にする必要がありますが、その文字の前に画像がある場合があります。:first-letterHTML以外のタグに適用する方法はありますか？

CSS：

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

HTML：

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

4 に答える 4

1

最初の文字：after：before疑似クラスが機能しないので、私はあなたのために1つのトリックを作成しました。これがあなたに役立つことを願っています：-

  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-30T09:24:38.207 に答える
1

CSSでは不可能です。提案されているようにHTMLを変更するか、JavaScriptハックを行う必要があります。

  • 段落の最初の子のimg要素を検索する
  • それらを段落の最後に移動します
  • それらにスタイル定義を適用して、テキストの前に表示します
于 2012-05-30T09:18:09.520 に答える
0

「最初」は最初を意味します。HTMLを次のように変更します。

<p>West Philadelphia, Born And Raised<img style="float:left;" src="will.jpg" /></p>
于 2012-05-30T09:10:03.453 に答える
0

CSS：

.red_color {
    color: red;
}

HTML：

<img src="will.jpg"><span class='red_color'>W</span>est Philadelphia, Born And Raised
于 2012-05-30T09:24:15.563 に答える