jquery - 如何用jquery将段落的第一个字母大写但没有符号？

Question

在我的 worpdress 博客中，我使用以下 jquery 代码将第一个字母包装在 span 标记中，这样我就可以将其样式设置为更大的外观：

$(".single .the_content p:first")
  .each(function () { var el = $(this), replace(/\b[a-z]/g, text = el.html(), first = text.slice(0, 1), rest = text.slice(1); el.html("<span class='capital'>" + first + "</span>" + rest); });

它工作正常但是，当我插入图像时不显示，因为图像插入代码的第一个符号“<”我包裹在跨度标签中，那么，我怎样才能将它仅应用于从 a 到 z 的字母？

Answer 1

我认为您正在寻找':first-lettercss 伪元素

如果你像这样添加css：

.single .the_content p:first-letter {
    font-size: 2em;
    color: #80ffff;
}

或类似的东西，应该涵盖它。

（哦，对了，使用:first-childcss 伪元素）

Answer 2

这是一个示例，它将一系列段落的第一个字母设置为具有较大外观并将其向左浮动，类似于在杂志中看到的样式。

p:first-child:first-letter {
    font-size: 5em;
    float: left;
    padding: 0 10px 10px 0;
    text-transform: uppercase;
}

演示：http: //jsfiddle.net/jrthib/du4qv/1/

参考：http ://css-tricks.com/almanac/selectors/f/first-letter/