如何防止CSS继承?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (130)

我在侧栏中有一个使用嵌套列表的分层导航菜单(<ul>和<li>标签)。我使用的预制主题已经有列表项目的样式,但是我想要改变顶层项目的样式,但不适用于子项目。是否有一种简单的方法将样式应用到顶级列表项标签,​​而无需将这些样式级联到其子项列表项中?我明白,我可以明确地将重写样式添加到子项中,但是我真的想避免重复所有样式代码,如果有一种简单的方法可以说“将这些样式应用于此类并且不会级联他们下到任何儿童元素“。这里是我使用的HTML:

<ul id="sidebar">
  <li class="top-level-nav">
    <span>HEADING 1</span>
    <ul>
      <li>sub-heading A</li>
      <li>sub-heading B</li>
    </ul>
  </li>
  <li class="top-level-nav">
    <span>HEADING 2</span>
    <ul>
      <li>sub-heading A</li>
      <li>sub-heading B</li>
    </ul>
  </li>
</ul>

因此,CSS已经为“#sidebar ul”和“#sidebar ul li”设置了样式,但是我想将其他样式添加到“#sidebar .top-level-nav”,而不会级联到其子级。有什么办法可以简单地做到这一点,或者是否需要重新排列所有样式,以便“#sidebar ul”上的样式现在特定于某些类。

提问于
用户回答回答于

到目前为止,还没有父选择器,因此你必须将样式应用于子列表项以覆盖父列表项的样式。

级联是层叠样式表的全部内容,因此也就是名称。

用户回答回答于

你可以使用子选择器。

所以用

#parent > child

将只使第一级的孩子有样式的应用。然而IE6不支持子选择器。

否则你可以使用

#parent child child

若要为低于一个级别以上的子级设置另一个特定样式,请执行下面的操作。

扫码关注云+社区

领取腾讯云代金券