我怎样才能使 CSS :first-letter 不是标记/HTML 标记功能？答案

【问题标题】：How can i make CSS :first-letter that isn't mark-up/HTML tag function?我怎样才能使 CSS :first-letter 不是标记/HTML 标记功能？
【发布时间】：2012-05-30 08:55:05
【问题描述】：

很简单，我需要将<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>

【问题讨论】：

如果将文本放在 span 元素中并将 css 更改为 p > span:first-letter 会发生什么？
不可能。它是数据库驱动的内容，内容由许多用户以所见即所得的形式创建。有些会加价，所以不会。
有了css，你做不到，你用什么所见即所得？也许你可以改变行为......
@h2ooooooo：你不能:first-letter一个内联元素，如果你试图让它显示为一个块或内联块，它可能会破坏OP的布局。

标签： html css frontend

【解决方案1】：

使用 CSS 是不可能的。您需要按照建议更改 HTML 或做一些 javascript hack：

查找段落的第一个子 img 元素
将它们移到段落的末尾
对其应用样式定义以显示在文本之前

【讨论】：

或者使用 Javascript 动态地用提到的 span 标签（上图）包装第一个字母/单词。因此，您可以保持图像不变。
谢谢。我将寻找其他替代方案。

【解决方案2】：

在第一个字母中：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

【讨论】：

【解决方案3】：

“第一”的意思是首先。将您的 HTML 更改为：

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

【讨论】：

正如Tiny指出的那样，他使用的是所见即所得，无法控制源

【解决方案4】：

CSS：

.red_color {
    color: red;
}

HTML：

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

【讨论】：