僅使用CSS可以以大寫形式顯示第一個字符，以小寫形式顯示其他字符

Question

例如，這樣的字符串位於HTML元素內：

  - One Tree 
  - one tree 
  - One tree 
  - one Tree

應用樣式后，它們應呈現為：

One tree

PD：僅使用CSS，沒有javascript，也沒有其他處理。

Answer 1

是的，完全有可能。

例如，請參見以下代碼：

 li, p{ text-transform: lowercase; } li::first-letter, p::first-letter{ text-transform: uppercase; } 

 <ul> <li>first Li Item</li> <li>SeCOND li Item</li> </ul> <p> First PitEm is herE. </p> 

此處的示例： https : //jsfiddle.net/s23xr3km/

Answer 2

您需要創建兩個span id，第一個span id應該具有這樣的CSS

#spanId1 {
text-transform : capitalize;
}
#spanId2 {
text-transform :lowercase;
}
<span id = "spanId1"> One </span> <span id = "spanId2"> Tree </span>