在非组织列表中预选项目<ul><li>

Question

我有一个用户选项列表，其中一个是系统确定的默认选项。

我将这些选项安排为列表中的可单击项。 我想预选第二个项目，这是我在JQuery和CSS尝试过的项目
jQuery的

$("ul > li:nth-child(2)").addClass("selected-state");

的CSS

.selected-state {
     background: #c24e4e;
}

.selected-state只是模仿伪类选择器活动，悬停和聚焦的行为

这行不通，没有孩子应用背景，但这可能也是Vue.js生命周期的一个因素，这不是我要问的问题。 我希望从其他方法中获得灵感，以达到自己的期望

Answer 1

它工作得非常好-您甚至不需要jQuery：

 ul > li:nth-child(2) { background: #c24e4e; } 

 <ul> <li>One</li> <li>Two</li> <li>Three</li> </ul> 

Answer 2

Jack Bashford的答案对我来说最有意义，但是如果您想使用jQuery，则可以使用以下方法：

 var listItems = $("ul > li"); $(listItems[1]).addClass("selected-state"); 

 .selected-state { background: #c24e4e; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul> <li>a</li> <li>b</li> <li>c</li> <li>d</li> </ul> 

Answer 3

jQuery的替代选项。 您可以使用.eq()方法。

 function highlight(param) { $("ul > li").eq(param).addClass("selected-state"); } highlight(1);//Pass param(number) to highlight your desire li. 

 .selected-state { background: #c24e4e; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul> <li>a</li> <li>b</li> <li>c</li> <li>d</li> </ul> 

Answer 4

您可以通过多种方式做到这一点：

一

 ul > li:nth-of-type(2) { background: #c24e4e; color: #fff; } 

 <ul> <li>a</li> <li>b</li> <li>c</li> <li>d</li> </ul> 

二

 $('ul > li:eq(1)').addClass('selected-state') 

 .selected-state { background: gray; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul> <li>a</li> <li>b</li> <li>c</li> <li>d</li> </ul> 

三

使用CSS使用下一个同级选择器

ul > li:nth-child(1) + li { background: red; }

四

$('ul > li:nth-child(1)').addClass('selected-state');

注意 ：每个答案都适用于与jQuery选择器相同的CSS选择器，您可以尝试任何人。

===谢谢===