如何防止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

到目前为止，还没有父选择器（或ShaunInman称其为合格选择器，因此您将必须将样式应用于子列表项，以覆盖父列表项上的样式。

级联是级联样式表的全部要点，因此得名。