如何防止CSS继承？

我的侧边栏中有一个使用嵌套列表（<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现在使用的样式特定于某些类？

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

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

您可以使用子选择器

所以使用

#parent > child

将仅使第一级子级应用样式。不幸的是IE6不支持子选择器。

否则你可以使用

#parent child child

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

有一个名为属性all中CSS3继承模块。它是这样的：

#sidebar ul li {
  all: initial;
}

自2016年12月起，除IE / Edge和Opera Mini以外的所有浏览器均支持此属性。

您可以使用*选择器将子样式更改回默认样式

例

#parent {
    white-space: pre-wrap;
}

#parent * {
    white-space: initial;
}

使用iframe进行包装会使父CSS变得过时。

简短的答案是：不，不可能防止CSS继承。您只能覆盖在父级上设置的样式。参见规格：

HTML文档中的每个元素都将从其父元素继承所有可继承的属性，但根元素（html）没有父元素。- W3C

除了覆盖每个继承的属性。您也可以使用initial关键字，例如color: initial;。它也可以与一起使用all，例如all: initial;，它将立即重置所有属性。例：

.container {
  color: blue;
  font-style: italic;
}
.initial {
  all: initial;
}

<div class="container">
  The quick brown <span class="initial">fox</span> jumps over the lazy dog
</div>

根据我可以使用的浏览器支持表...

• all （目前，IE和Edge均不支持，其他都不错）
• initial （目前在IE中不提供支持，其他都不错）

在某些情况下，使用直接子选择器>可能会发现它很有用。例：

.list > li {
  border: 1px solid red;
  color: blue;
}

<ul class="list">
  <li>
    <span>HEADING 1</span>
    <ul>
      <li>sub-heading A</li>
      <li>sub-heading B</li>
    </ul>
  </li>
  <li>
    <span>HEADING 2</span>
    <ul>
      <li>sub-heading A</li>
      <li>sub-heading B</li>
    </ul>
  </li>
</ul>

边框样式仅适用于直接子级<li>，border非继承属性也是如此。但是，文本颜色color和继承的属性一样，已应用于所有子级。

因此，>在防止继承方面，选择器仅对非继承属性有用。

您可以使用jQuery之类的功能来“禁用”此行为，尽管我几乎认为这不是一个很好的解决方案，因为您可以在CSS和javascript中获得显示逻辑。不过，根据您的要求，您可能会发现jQuery的css utils使您的生活比尝试变黑的css更容易，尤其是在您尝试使其适用于IE6的情况下。

例如，如果您在XHTML文档中有两个div。

<div id='div1'>
    <p>hello, how are you?</p>
    <div id='div2'>
        <p>I am fine, thank you.</p>
    </div>
</div>

然后在CSS中尝试。

#div1 > #div2 > p{
    color: red;
}

仅影响“ div2”段落。

#div1 > p {
    color: red;
} 

仅影响“ div1”段落。

您不需要的类引用li。而不是像CSS

li.top-level-nav { color:black; }

你可以写

ul#sidebar > li { color:black; }

这将仅将样式应用于li从边栏立即下降的ul。

只需在“ #sidebar ul li”选择器中将它们恢复为默认值