jquery – 我可以使用CSS来改变每个单词的第一个字母的颜色和字体大小

前端之家收集整理的这篇文章主要介绍了jquery – 我可以使用CSS来改变每个单词的第一个字母的颜色和字体大小前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
与问题标题一样,是否可以更改每个单词的第一个字母的颜色和字体大小.例如,如下图所示:

是否可以只用CSS做到这一点?我可以使用jQuery,但只有在纯CSS或CSS3解决方案不可能的情况下才能使用.

解决方法

您可以使用此CSS生成小写大写的文本,每个单词都大写:
h1 {
    font-variant: small-caps;
    text-transform: capitalize;
}

但是你不能仅使用CSS来改变首字母的颜色;你将不得不使用jQuery为文本添加span元素,然后设置这些元素的样式.像这样的东西:

$('h1').html(function() {
    // Very crude regex I threw together in 2 minutes
    return $(this).text().replace(/\b([a-z])/gi,'<span class="caps">$1</span>')
});

有了这个CSS:

h1 {
    font-variant: small-caps;
    text-transform: capitalize;
}

h1 .caps {
    color: red;
}

猜你在找的jQuery相关文章