3

很简单，我需要将 a 中的第一个字母<p>设置为不同的颜色，但有时在该字母之前有一个图像。有没有办法:first-letter适用于非 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>
4

4 回答 4

1

在第一个字母中:after:before 伪类不起作用所以我为你做了一个技巧我希望这会对你有所帮助:-

  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 hack：

  • 查找段落的第一个子 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 回答