如何防止 CSS 继承？答案

【问题标题】：How do I prevent CSS inheritance?如何防止 CSS 继承？
【发布时间】：2010-10-31 18:51:15
【问题描述】：

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

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

【问题讨论】：

我确实在网站上搜索了类似的问题，但没有找到任何东西（不是说没有，但我确实看过）。如果你知道它是什么，你能指导我吗？谢谢！
stackoverflow.com/questions/747308/breaking-css-inheritance |它几乎说明了马修的回答。
所以我认为答案是“不，没有办法简单地做到这一点——您必须手动覆盖子项目上的每个样式设置”——我是否正确解释了这一点？再次感谢。

标签： css

【解决方案1】：

您要么使用子选择器

所以使用

#parent > child

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

否则你可以使用

#parent child child

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

【讨论】：

你能告诉我这个在 JSFiddle 中的作用吗？我试图将一个内联块显示的 div 居中，但它仍然使 div 内的文本居中。

【解决方案2】：

CSS3 inheritance module 中有一个名为all 的属性。它的工作原理是这样的：

#sidebar ul li {
  all: initial;
}

截至 2016-12，all browsers but IE/Edge and Opera Mini 支持此属性。

【讨论】：

@AndriusDobrotinas 最终会成为支持吗？我似乎没有完全理解你的评论。有一个提供此功能的 PostCSS 插件，如果您使用 PostCSS：github.com/maximkoretskiy/postcss-initial
@AndriusDobrotinas，您的评论非常不具建设性。答案是为了社区而发布的；尽最大努力看到它的好处。
目前只有IE和Opera Mini不支持，其他主流浏览器都支持
@Boldewyn 没有“默认”值，从链接的 w3 文档中可以看出...
我将它设置为初始值，可能最接近默认值的含义，不过，老实说，我没有花超过几分钟的时间研究...希望没关系。

【解决方案3】：

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

层叠是层叠样式表的全部意义，因此得名。

【讨论】：

此信息自 IE8 以来已过时。请参阅 Silviu Postavaru 的答案。请考虑将检查更改为更合适的答案。
大声笑，我同意级联是一种精髓。但是应该有一种方法可以阻止来自特定父级的传播，该父级旨在不同。

【解决方案4】：

您可以使用* selector 将子样式改回默认样式

例子

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

#parent * {
    white-space: initial;
}

【讨论】：

这是一个非常漂亮的解决方案——尤其是如果你不知道父母的班级。
我想我知道这个问题的答案，但是有没有办法设置这个内联？ <div id="parent" style="white-space:pre-wrap;*white-space:initial;"/>

【解决方案5】：

使用 iframe 包装会使父 css 过时。

【讨论】：

有趣的是，这是最糟糕的答案，因为从技术上讲，这是阻止 CSS 继承的唯一物理方式。并不是说我认为你应该这样使用它。
我建议不要使用 CSS 进行实体化，将它留在它所属的虚拟世界中！
实际上添加iframe 使我的子组件不可见。想法？
这不是唯一的物理方式 - 自定义元素也可以使用

【解决方案6】：

简短的回答是：不，不可能阻止 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>s，因为border 是非继承属性。但是文本颜色已应用于所有子项，因为color 是一个继承属性。

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

【讨论】：

【解决方案7】：

您可以使用 jQuery 之类的东西来“禁用”这种行为，尽管我认为这是一个很好的解决方案，因为您可以在 css 和 javascript 中获得显示逻辑。尽管如此，根据您的要求，您可能会发现 jQuery 的 css 实用程序让您的生活比尝试 hacky css 更轻松，特别是如果您试图使其适用于 IE6

【讨论】：

【解决方案8】：

例如，如果您在 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”段落。

【讨论】：

【解决方案9】：

您不需要lis 的类引用。而不是像 CSS 那样

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

你可以写

ul#sidebar > li { color:black; }

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

【讨论】：

【解决方案10】：

您可以使用浏览器提供的新功能Shadow Dom。目前浏览器支持也相当不错。

文档：https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM

【讨论】：

【解决方案11】：

您可以将不想继承任何样式的元素包装在没有样式的div中。

类似这样的：

<div style='all: revert !important;'>
  Your content here
</div>

【讨论】：

【解决方案12】：

只需在“#sidebar ul li”选择器中将它们设置回默认值

【讨论】：

感谢您的回答。是的，我知道我可以将它们设置回子项目的样式，但我试图避免这种情况，因为我使用的主题不是我创建的，我想知道是否可以节省大量时间只需使用一些“不要级联：真”规则或类似的东西，而不是定位分散在各处的 ul 和 li 的所有不同样式，然后担心网站其他区域的意外后果.