如何在不使用“:nth-of-type”伪选择器的情况下设置这段代码中第一段首字母的样式?
<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>
最佳答案
如果您试图支持旧版本的 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);
希望这对您有所帮助。
关于不使用 "of-type"的几个容器元素内的 CSS3 目标第一段,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11403344/