有没有一种更优雅的方式来实现背景色的链接，通过目标ID？

我想让我的wordpress菜单项有2种不同的背景颜色：一个用于链接，另一个用于：悬停。我是一名CSS初学者，发现了一个解决方案，但不幸的是它不是一个好的解决方案，因为我使用wordpress生成的菜单ID作为目标，如果我删除菜单并创建另一个菜单，该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; 
}

将感谢任何建议，谢谢。

来源

2013-05-02 James Hector

是'secondari'在这个问题上的拼写错误？或者这也是你的代码中的错字？ – George 2013-05-02 15:49:25

你的目标是一个锚是李元素的第n个孩子。每个李只有一个锚可能。您需要针对李为菜单的第n个孩子，像这样：

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

来源

2013-05-02 15:50:20 tomca32

哎哟，好像我不明白我的目标是什么。非常感谢你！ – 2013-05-02 15:58:39

你不会，即使你使用的是共同的背景颜色和共同悬停颜色需要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 */ 
}

还要确保你让你的锚TA g display: block;如果你想掩盖整个li

来源

2013-05-02 15:52:49

有没有一种更优雅的方式来实现背景色的链接，通过目标ID？

回答

相关问题