在分层菜单中，从父元素继承的样式有时会出现问题。本文解决了在嵌套导航菜单中防止 CSS 继承的问题，确保只有顶级项目具有特定样式。
提供的 HTML 结构利用具有分层结构的嵌套列表。问题在于如何将样式应用于顶级列表项（具有“top-level-nav”类的“li”）而不影响嵌套子项。
使用子选择器
一种方法是使用子选择器(">"):
#parent > child
在这种情况下，它将是：
#sidebar > .top-level-nav
这确保样式仅应用于“#sidebar”元素的直接后代，有效地仅针对顶级导航项。值得注意的是，Internet Explorer 6 不支持子选择器。
利用多个子选择器
或者，您可以使用多个子选择器为特定深度的元素指定样式:
#parent child child
对于实例：
#sidebar child child
此目标是“#sidebar”内两层深处的元素。
避免代码重复
避免重复子项的样式，可以修改现有的“#sidebar ul li”规则以应用于所有嵌套列表项，而具体样式对于顶级项目，可以使用上面提到的子选择器来定位。
以上是如何在设置顶级项目样式时防止嵌套菜单中的 CSS 继承？的详细内容。更多信息请关注PHP中文网其他相关文章！
