僅使用css規則更改句子中單詞的第一個字母的顏色

Question

僅使用css規則更改單詞的第一個字母的顏色。爲了檢查我的代碼，請參閱：

.right_img ul li::first-letter { 
    color: red; 
} 

Fiddle Demo

，我想這一點：

Answer 1

如果你可以使用JavaScript，那麼你應該試試下面的代碼...

$('.capitalize').each(function(){ 
 
    var text = this.innerText; 
 
    var words = text.split(" "); 
 
    var spans = []; 
 
    var _this = $(this); 
 
    this.innerHTML = ""; 
 
    words.forEach(function(word, index){ 
 
     _this.append($('<span>', {text: word})); 
 
    }); 
 
});

.capitalize { 
 
    text-transform: lowercase; 
 
} 
 

 
.capitalize span { 
 
    display: inline-block;  
 
} 
 

 
.capitalize span:first-letter { 
 
    text-transform: uppercase !important; 
 
    color:red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class='capitalize'> 
 
    SOMETHING BETTER 
 
    SOMETHING BETTER 
 
    SOMETHING BETTER 
 
</div>

Answer 2

的::first-letter pseudo-element將目標只有一個元素的第一行的第一個字母（以你的例子，「N」，「E」&「S」）。沒有CSS選擇器可以完成你想要做的事情，唯一的方法就是將每個單詞的第一個字母包裝到另一個標籤中，並使用CSS來定位該標籤。