你可以样式有序的列表数字在javascript?

Question

我有一些东西可以在列表中选择行号，并且我有通过使用有序列表生成的行号。当我选择了行号时，我希望该特定行的行号指示器改变颜色。我该怎么做呢?

我知道你可以在CSS样式做li::marker，但我如何改变单个列表项标记在javascript?

https://replit.com/@KittyCraft0/3D-modeling-software-10 ObjSettings/SelPoint.js: 67:29

Answer 1

您可以添加一个类来列出您想要突出显示的项目。

document.querySelector('ol').children[1].classList.add('highlight');

li.highlight::marker {
color: red;
}

<ol>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ol>

如果项目事先已知，则可以使用:nth-child()伪类。

li:nth-child(2)::marker {
color: red;
}

<ol>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ol>