css - 如何防止 CSS 继承？

Question

我的边栏中有一个分层导航菜单，它使用嵌套列表(

和
• 标记)。我正在使用已经具有列表项样式的预制主题，但我想更改顶级元素的样式但不将其应用于子项。有没有一种简单的方法可以将样式应用于顶级列表项标签，​​而无需将这些样式级联到其子列表项？我知道我可以明确地向子项添加覆盖样式，但我真的很想避免复制所有样式代码，如果有一种简单的方法可以说“将这些样式应用于此类并且不要级联它们细化到任何子元素”。这是我正在使用的 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 上的样式现在特定于某些类？

Answer 1

你要么使用子选择器

所以使用

#parent > child

只会让第一级 child 应用样式。很遗憾，IE6 不支持子选择器。

否则你可以使用

#parent child child

为下一级以上的子级设置另一种特定样式。