2

我想让我的 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;
}

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

4

2 回答 2

4

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

#menu-secondary li:nth-child(1) a {
    background-color:#fff;
}
#menu secondari li:nth-child(1) a:hover {
    background-color:#000;
}
于 2013-05-02T15:50:20.860 回答
1

nth-child如果您使用常见的背景颜色和常见的悬停颜色，您甚至不需要..

#menu-secondary li a {
   /* Styles goes here */
}

正如你所说，你不期待使用 id 因为它可能是动态的，如果它是唯一的，你也可以使用元素选择器选择元素，比如

div.class_name ul li a { /* class_name indicates your wrapper element class name */
   /* Styles goes here */
}

如果你display: block;想覆盖整个li

于 2013-05-02T15:52:49.307 回答