javascript - 预选无组织列表中的元素

Question

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

我已将这些选项排列为列表中的可点击元素。我想预选第二项，这是我在 JQuery 和 CSS
中尝试过的Jquery

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

CSS

.selected-state {
     background: #c24e4e;
}

.selected-state 只是模仿伪类选择器 active、hover 和 focus 的行为

这没有用，没有 child 应用背景，但这也可能是 Vue.js 生命周期的一个因素，这不是我要问的问题。我希望从其他方面获得灵感，以实现我希望的目标

Answer 1

它工作得非常完美——你甚至不需要 jQuery:

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

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