Bootstrap修复了特定元素及其子女的冲突

Question

我有问题，因为在某些元素中应用CSS，例如H2，H3，H4等...

这是我在Bootstrap中看到的代码，请注意，它将样式应用于这些元素

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  color: inherit;
  font-family: inherit;
  font-weight: 500;
  line-height: 1.1;
}

这是我的示例代码：

<div class="page-wrapper">
<!-- OK to be added styles by boostrap -->
<div class="container">
    <h2><span>WELCOME BOOTSTRAP</span></h2>
</div>
<!-- Bootstrap should not add styles to this div and its children.
This HTML is generated from external source and i just grab it and append it in DOM.
All styles here are inline.
If no inline styles applied, then stay it as is and dont let boostrap add other styles.     
-->
<div class="mycontent">
    <h2 style="font-style:italic;">
        <span style="color:#FFFFFF;"><span style="font-size: 72px;">NO BOOSTRAP HERE PLS!</span</span>
    </h2>
</div>
</div>

如何实现" mycontent"内部的H2会忽略引导样式？我的意思是H2不应该具有这些样式：颜色：继承；字体家庭：继承;字体重量：500;线路高：1.1;我的意思是上面

重要注释：我不能用" myconent"将其编辑/添加样式，因为这是从其他来源生成的。我要做的就是不要让引导程序添加特定元素及其子女的样式。

任何建议确实是一个很大的帮助。

Answer 1

在您的示例中，只需将以下内容添加到您的CSS：

div.myContent h2{
 /* YOUR STYLES */
}

应该有足够的特异性来覆盖Bootstrap的样式。注意 - 您需要将此CSS放在引导程序CSS文件下方。

对于您要覆盖的任何样式 - 只需在所讨论的规则中添加更多的特异性，或重复该规则并替换您感兴趣的属性。只要在引导程序后放置CSS，任何规则都将替换已指定的规则。