使用css更改首字母大写和其他小写

Question

我正在尝试更改li中的所有文本，如第一个字母大写，而其他文字更低，如下所示。 但它不起作用，为什么？

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>

Answer 1

将innerText转换为小写，并使用text-transform capitalize获取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>

Answer 2

更新Css

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

}
ul li
{
  text-transform: lowercase;   
}

直播Demo

Answer 3

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 4

ul>li{
text-transform:capitalize;
}

使用上面的代码