css - 是否有更优雅的方式通过定位 id 在链接上实现背景颜色？

Question

我想让我的 wordpress 菜单项有 2 种不同的背景颜色:一种用于链接，一种用于 :hover。我是一个 CSS 初学者，找到了一个解决方案，但不幸的是，这不是一个好的解决方案，因为我以 wordpress 生成的菜单 id 为目标，如果我删除菜单并创建另一个菜单，该 id 将消失，我的样式将不再起作用.

例子:

menu-item-1212 a {
background-color:#fff;
}

menu-item-1212 a:hover{
background-color:#000;
}

有没有更优雅的方法来解决这个问题，这样无论第一个菜单项的 ID 是什么，它都会保留背景颜色和悬停颜色？我在网上搜索了一个替代方案并找到了:nth-​​child。我确实尝试过创建这样的东西:(但没有成功)

#menu-secondary li a:nth-child(1) {
background-color:#fff;
}
#menu secondari li a:hover:nth-child(1) {
background-color:#000;
}

将不胜感激任何建议，谢谢。

Answer 1

您正在定位一个 anchor ，它是 li 元素的第 n 个子元素。每一里大概只有一个 anchor 。您需要将 li 定位为菜单的第 n 个子项，如下所示:

#menu-secondary li:nth-child(1) a {
    background-color:#fff;
}
#menu secondari li:nth-child(1) a:hover {
    background-color:#000;
}