使用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更改第一个字母大写字母和其他小写字母

回答

相关问题