无序列表中的无序列表 - 选择特定的行项目答案

【问题标题】：unordered list within unordered list - select particular line item无序列表中的无序列表 - 选择特定的行项目
【发布时间】：2012-04-21 05:30:47
【问题描述】：

我正在构建一个带有下拉菜单的导航。我希望包含无序列表 subnav 的行项目在悬停时具有白色锚文本。我已经这样做了，但是我的选择器导致了其中一个下拉订单项的错误。请参阅：http://jsfiddle.net/W3Dzd/ 如果您将鼠标悬停在“sui generis”上并在菜单中向下运行光标，则它可以正常工作，但“mantels”除外 - 悬停时锚文本不会改变颜色。我猜发生的事情是主导航中第 3 行项目的选择器也选择了子导航中的第 3 行项目。有人可以建议更好的选择器或解决方法吗？

【问题讨论】：

标签： html css navigation html-lists

【解决方案1】：

如果您可以更改生成菜单的代码（或手动更改它们，如果您手动编码它们），您将通过将子菜单类应用到父级@ 而最终得到一个更强大的系统987654322@ 而不是孩子ul。您之前的代码通过复杂的选择器定位特定的列表项，如果您重新排列菜单或从中添加/删除项目，这些选择器会中断。新代码将毫无问题地处理这些情况。

您可以在更新后的 jsFiddle 中查看这可能如何工作的示例：http://jsfiddle.net/W3Dzd/4/

【讨论】：

感谢您的反馈。我不确定您建议我用您的代码替换哪个选择器？沿着“.navigation li:first-child + li + li:hover > a”行的冗长的、必须过于复杂的选择器是试图选择特定的列表项，而不是列表中的所有列表项？你能澄清一下你建议我替换哪个选择器吗？谢谢！
@DougFirr 我更新了我的答案以改进它。我不确定你想用那个选择器做什么，但根据它的实际效果，它似乎是多余的。
啊，谢谢。但是，现在我丢失了标题行项目“sui generis”和“reclaimed wood”的悬停状态下的白色锚文本。这是因为我只想选择这些行项目，所以我使用了第一个孩子 + li 等。你能建议如何确保这些标题“sui generis”和“reclaimed wood”在悬停时有白色锚文本像他们以前那样？在不影响其他列表项的情况下，最好的选择器是什么？
@DougFirr 射击，我错了。我更新它的方式确实破坏了你正在做的事情 - 现在我明白了。稍等一下，我会为你解决这个问题:)
@DougFirr 顺便说一句，您为什么要针对样式表中的特定项目？您确实应该更改代码以在父项上放置一个类。如果您重新排列菜单或向其中添加项目，您现在拥有它的方式会在两者之间建立一个非常脆弱的联系。