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

Question

我有页面上显示ul的页面，如下所示：

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

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

Answer 1

使用jQuery将类添加到<ul/>

的第一个元素

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

演示：https://jsfiddle.net/e8pvj9hb/

Answer 2

这将定位第一次出现<li>并对其应用边框。

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

如果您只想定位具有特定类的第一个<li>，则可以将('li')更改为('li.someClass')之类的内容，并在您要定位的元素上添加一个类。

如果您还希望定位所有li元素，请使用类似的内容。

document.querySelectorAll('li').forEach(function(x) { x.style.border = '1px solid #ccc'; })

Answer 3

如果您更喜欢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');