使用jquery设置段落的第一个字符的样式

您可以使用CSS3来设置第一个字符的样式。

p::first-letter { 
  font-size: 200%;
  color: #8A2BE2;
}

演示：http://jsfiddle.net/vhyqowde/

更多信息：http://www.w3schools.com/cssref/sel_firstletter.asp

Javascript方法：

$(document).ready(function () { 
    var elem = $("p").contents().filter(function () { return this.nodeType == 3 }).first(),
        text = elem.text().trim(),
        first = text.slice(0, 1);
    if (!elem.length)
        return;
    elem[0].nodeValue = text.slice(first.length);
    elem.before('<span>' + first + '</span>');
});

http://jsfiddle.net/kynt4pot/

使用CSS first-letter选择器

p::first-letter {
    color: #FF69B4;
}

这将选择每个<p>元素的第一个字母并设置其样式JS Fiddle演示

使用Jquery：http://jsfiddle.net/2wkjyz4g/2/

var x= $(".about p:eq(0)").text();
var text='<span class="fChar">'+x.charAt(0)+'</span>';
$(".about p:eq(0)").html(text + x.slice(1,x.length));

带css：http://jsfiddle.net/pe5Loaqn/

.about p:first-child:first-letter {
    color:red;
}

因为您要求jquery解决方案，并且选择了1st（:eq(0)）<p>标签。

在@Garconis的评论后更新

var parent = "p"
function styleFirst(elem){
	var content = $(elem).contents()[0];
  if(content.nodeType == 1){
  	 styleFirst(content);
  }else if(content.nodeType == 3){
     $(elem).html(style(String(content.nodeValue)));
  }
}
function style(txt){
    var newTxt = '<span class="fChar">' + txt.charAt(0) + '</span>';
		return newTxt + txt.slice(1, txt.length);
}
styleFirst(parent);

.fChar {
    color:red;
}
span{
  color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<p><span><span>Win</span>ter</span> is <span>here</span> !!!!!!!!!!!</p>

代码更新：

可以保留para标记中的节点，也可以设置第一个文本字符的样式，即使它嵌套在任何其他元素中。

可以更新代码以检查style()方法中的第一个字符是否为空格/制表符等，并可以应用后续样式。

在有了相同的初始问题后，我决定从其他人的代码中提取一些片段，并创建自己的解决方案/答案。这是我的方法。

演示：http://jsfiddle.net/Garconis/g72a4h03/

参考jQuery中的注释来理解其中的一些推理。

(function($) {
  // find each instance of your target
  $('p').each(function() {
    // now check if the first character is "<" character
    // if is NOT a "<" character, then continue
    if ($(this).html()[0] != "<") {
      // good, now search the contents of the first TEXT_NODE within the selector
      var node = $(this).contents().filter(function() {
          return this.nodeType == 3
        }).first(),
        // check the start of the string (which is what the ^ is for)
        // find any white space (via the "'s")
        // and chunks of contiguous whitespace, which is what the + is for on "'s+"
        // and keep finding all instances at the start, which is what the global "/g" is for
        // and convert them into nothing
        text = node.text().replace(/^'s+/g, ''),
        // now start at the beginning (0 position) and grab the first character
        first = text.slice(0, 1);
      // if the first node isn't a TEXT_NODE, then stop here
      if (!node.length)
        return;
      // remove the text character that we grabbed
      node[0].nodeValue = text.slice(first.length);
      // now add it back, before the node we checked, with a wrapper
      node.before('<span class="fs-dropcap">' + first + '</span>');
    };
  });
})(jQuery);

span.fs-dropcap {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<hr>
<p>&nbsp;"[yo]"This is a test <b>&nbsp; Other HTML <a href="#0;">tester</a> should not be affected by manipulations</b></p>
<hr>
<p>    This is a test <b>&nbsp; Other HTML <a href="#0;">tester</a> should not be affected by manipulations</b></p>
<hr>
<p><span>span tag here</span> This is a test <b>&nbsp; Other HTML <a href="#0;">tester</a> should not be affected by manipulations</b></p>
<hr>
<p><a href="#0">test</a> This is a test <b>Other HTML should not be affected by manipulations</b>
</p>
<hr>
<p>This is a test <b>Other HTML should not be affected by manipulations</b></p>
<hr>
<p>&nbsp; This is a test "Other HTML should not be affected by manipulations"
</p>
<hr>
<p><u>&nbsp;&nbsp;tester&nbsp;&nbsp;</u> This is a test "Other HTML should not be affected by manipulations"
</p>