jquery - 我可以只使用 CSS 来更改每个单词首字母的颜色和字体大小吗

Question

与问题标题一样，是否可以更改每个单词首字母的颜色和字体大小。例如，如下图所示：

是否可以仅使用CSS 执行此操作？我可以使用 jQuery，但前提是不能使用纯 CSS 或 CSS3 解决方案。

Answer 1

您可以使用以下 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;
}

Answer 2

JSFiddle

干得好 -

<p class="each-word">First letter of every word is now red!</p>

.first-letter {
    color: red;
  }

window.onload = function(){
  var elements = document.getElementsByClassName("each-word")
  for (var i=0; i<elements.length; i++){
    elements[i].innerHTML = elements[i].innerHTML.replace(/\b([a-z])([a-z]+)?\b/gim, "<span class='first-letter'>$1</span>$2")
  }
}

Answer 3

使用 psedo-element :first-letter，例如：

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

正如评论所暗示的，这需要每个单词都在自己的元素中，例如。<span>

但这是你越接近 OP 在纯 CSS 中想要的东西。

Answer 4

HTML

<h1>The title of this page goes here</h1>​

jQuery

$(document).ready(function() {
var words = $('h1').text().split(' ');
var html = '';
$.each(words, function() {
    html += '<span style="font-size:200%">'+this.substring(0,1)+'</span>'+this.substring(1) + ' ';
    });
    $('h1').html(html);
});​

JSFIDDLE