使用css更改第一個字母大寫字母和其他小寫字母

我正在嘗試將第一個字母改爲大寫字母的其他所有文本，其他字母如下所示。但它不工作，爲什麼？使用css更改第一個字母大寫字母和其他小寫字母

ul li{ 
 
     display: inline-table; 
 
     text-transform: lowercase; 
 
} 
 
ul li:first-letter{ 
 
    text-transform: uppercase !important; 
 
}

<ul> 
 
    <li>TEsTt1</li> 
 
    <li>TeSt2</li> 
 
    <li>TesT3</li> 
 
    <li>TEsT4</li> 
 
</ul>

來源

2016-08-12 Shin

'文本轉換：大寫;'使用 –

可能的複製[作出的第一個字符大寫CSS]（http://stackoverflow.com/questions/5577364/make-the-firs t-character-upper-in-css） –

這應該解決你的問題：http://stackoverflow.com/questions/5577364/make-the-first-character-uppercase-in-css –

轉換的innerText屬性爲小寫，並使用文本轉換利用得到Pascal大小寫

document.querySelectorAll('ul>li') 
 
.forEach(function(node){ 
 
    node.innerText = node.innerText.toLowerCase(); 
 
})

ul li{ 
 
     display: inline-table; 
 
     text-transform: capitalize; 
 
}

<ul> 
 
    <li>tEst1</li> 
 
    <li>teSt2</li> 
 
    <li>TesT3</li> 
 
    <li>tESt4</li> 
 
</ul>

來源

2016-08-12 06:59:17 z0mBi3

這不是與「TEsTt1」 – Shin

ul>li{ 
text-transform:capitalize; 
}

使用上述共同德

來源

2016-08-12 07:00:15

這不工作這與「TEsTt1」 – Shin

document.querySelectorAll('ul>li') 
 
.forEach(function(node){ 
 
    node.innerText = node.innerText.toLowerCase(); 
 
})

ul li{ 
 
     display: inline-table; 
 
     text-transform: capitalize; 
 
}

<ul> 
 
    <li>tEst1</li> 
 
    <li>teSt2</li> 
 
    <li>TesT3</li> 
 
    <li>tESt4</li> 
 
</ul>

來源

2016-08-12 07:00:53 Honza

這不是工作這不是使用「TEsTt1」 – Shin

您可能需要使用JavaScript來完成這種情況 – z0mBi3

這是真的，沒想到那 – Honza

更新的CSS

ul li::first-letter { 
    text-transform: uppercase; 

} 
ul li 
{ 
    text-transform: lowercase; 
}

直播Demo

來源

2016-08-12 09:25:23

這不適用於display：inline-table; – Shin

使用'display：inline-block;'。 –

使用css更改第一個字母大寫字母和其他小寫字母

回答

相關問題