我正在尝试使用CSS设置段落的第一个字母,并希望使用greensock添加一些动画,但实际上要求是为每个单词的第一个字母设置样式,而不仅仅是第一个字母段落.
关于这个的建议/想法是什么？
p{
font-size:150%;
color:#000000;
}
p::first-letter {
font-size: 200%;
color: #ff0000;
}
<p>Hello This Is The Title</p>
更新我尝试处理以下方式(添加span标记并定位每个范围的第一个元素)但它不起作用：
p span:nth-child(1)::first-letter {
font-size: 200%;
color: #ff0000;
}
解决方法
使用
split(" ")创建数组表单字符串,forEach()迭代每个单词.然后
slice(0,1)剪切该单词的第一个字母,然后用span附加.并用span添加css效果
var str = $('p').text().split(" ");
$('p').empty();
str.forEach(function(a) {
$('p').append(' <span>' + a.slice(0,1) + '</span>' + a.slice(1))
})
p {
font-size: 150%;
color: #000000;
}
span {
font-size: 200%;
color: #ff0000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <p>Hello This Is The Title</p>
