如何不从父母那里继承 CSS 样式？ [复制]答案

【问题标题】：How to not inherit CSS styles from parents? [duplicate]如何不从父母那里继承 CSS 样式？ [复制]
【发布时间】：2015-04-24 00:04:46
【问题描述】：

我想在<div class="jumbotron"> 中包含一个大的<div>，如下所示，但它不应该继承父母的CSS 样式。

<div class="container">
  <div class="jumbotron">
HTML chunk here that should not inherent from parents
  </div>
</div>

Here 是正确呈现的大 html 块，而 here 包含在 Bootstrap 模板中时，字体大小和更多内容都搞砸了。

问题

是否可以将 html 块与它固有的任何来自父母的 CSS 样式一起包含在内？

【问题讨论】：

如果您不想想让内容继承样式，为什么要将内容放在 jumbotron 中？在 jumbotron 中包装某些东西的全部目的是以某种方式对其进行样式设置...
请编辑您的 Fiddles 以仅使用格式更好的 CSS 显示与您的问题相关的代码。
我认为这个链接应该回答你的问题：stackoverflow.com/questions/958170/…... 简而言之：你必须覆盖你在父级中设置的任何属性。
正如@Shaggy 所提到的。您提供的小提琴并不是特别有用。此外，您可能想提及预期的尺寸或您想要的外观/布局类型的屏幕截图。并且您应该尝试将您的示例最小化为小的特定问题。 stackoverflow.com/help/mcve
可以放到iframe沙箱里

标签： html css twitter-bootstrap

【解决方案1】：

使用或阻止 CSS 继承的一些方法：

最明显的方法是删除 jumbotron css 并编写自己的。
其次，您可以尝试将 CSS 更改为更具体。例如使用高级 css 选择器 IE：.jumbotron > .childClass。或者像+ :not() :first-child :last-child（和其他）这样的东西。取决于您的用例。见advanced selectors。

或者如果您不想修改或更改父类的 CSS。然后另一个选择是用更高的父级覆盖它。比如……

<div class="jumboTronParent">
  <div class="container">
    <div class="jumbotron">
      <div class="myChildClass"></div>
    </div>
  </div>
</div>

.jumboTronParent .jumbotron > .myChildClass {
  font-size:1em;
  // applies font style to just first level children with this class
}

.jumboTronParent .jumbotron .myChildClass {
  font-size:1em;
  // applies font style to all children with class
}

【讨论】：