CSS3目标第一段内部几个容器元素而不使用“of-type”

Question

如何设置此代码中第一段的第一个字母，而不使用＆＃34;：nth-​​of-type＆＃34;伪选择器？

<div id="content-wrapper">
<div id="breadcrumbs">
<ul>
<li><a href="">Link</a></li>
</ul>
</div>
<article>
<section>
<h2>Page Name</h2>
<h3>Title</h3>
<p>Here, i'd like to style the first letter here</p>
</section>
</article>
</div>

Answer 1

如果您正在尝试支持旧版本的IE，我担心您将不得不将<span>标记中的第一个字母包起来并按照这种方式设置样式。

<p><span class="letter">H</span>ere, i'd like to style the first letter here</p>

或者如果您的内容是动态的，您可以使用jQuery将<span>中的第一个字母包起来，然后将应用该样式。

text = $('p').html();
first = $('<span>'+text.charAt(0)+'</span>').addClass('letter');
$('p').html(text.substring(1)).prepend(first);

希望这有帮助。