将每个项目悬停在 ul 不同的颜色

Question

我需要让 ul 中的每个 li 在悬停时更改为不同的颜色。我知道您可以使用 :first-child 和 :last-child，但是您可以 select 1st、2nd、3rd 等吗？我正在更改 Wordpress 导航菜单中的每个项目。

目前有五个项目，如果你能告诉我如何使用 CSS/jQuery 将每个项目设置为不同的颜色（最好是 CSS），那就太好了。

如果能设置成以后添加更多的物品就可以随机select五种颜色中的一种了。

Answer 1

使用 :nth-child() or :nth-of-type CSS 选择器：

p:nth-child(2) {
    background: #ff0000;
}

或

p:nth-of-type(2) {
    background: #ff0000;
}

演示： https://jsfiddle.net/lmgonzalves/bv9h7ue3/1/

Hover each item in a ul different colour