Javascript 仅为UL的第一个元素（JS或jquery）添加类样式

我有一个页面，页面上显示

ul

，如下所示：

<ul>
    <li style="width: 158px;">A</li>
    <li style="width: 158px;">B</li>
    <li style="width: 158px;">C</li>
</ul>

宽度：158px；>A
宽度：158px；>B
宽度：158px；>C

---

我是否可以仅为第一个元素A添加样式边框或类（使用JS或jQuery或任何其他框架）？

使用jQuery将类添加到

$(document).ready(function(){
    $('ul li:first').addClass('has-border');
});

---

演示：

这将针对第一次出现的

并对其应用边框

document.querySelectorAll（'li'）[0].style.border='1px solid#ccc'

如果只想将第一个
作为特定类的目标，可以将
（'li'）
更改为类似于
（'li.someClass'）
的内容，并将一个类放在要作为目标的元素上

如果您还希望以所有
li
元素为目标，请使用类似的方法

document.querySelectorAll（'li'）.forEach（函数（x）{
x、 style.border='1px实心#ccc'；
})
如果您喜欢CSS：

ul li:first-child {
    border: solid 1px red;
}

如果您喜欢JavaScript：

document.querySelectorAll('li')[0].style.border = '1px solid red';

如果您更喜欢jQuery：

$('ul li').first().css('border', '1px solid red');