如何在设置顶级项目样式时防止嵌套菜单中的 CSS 继承？

防止嵌套菜单中的 CSS 继承

在分层菜单中，从父元素继承的样式有时会出现问题。本文解决了在嵌套导航菜单中防止 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中文网其他相关文章！