Question

我有问题，因为bootstrap在某些元素中应用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>

我怎样才能实现课堂内的h2＆＃34; mycontent＆＃34;会忽略引导样式吗？我的意思是h2不应该有这些样式：color：inherit; font-family：inherit; font-weight：500; line-height：1.1;我在上面的意思

重要提示：我无法使用类＆＃34; myconent＆＃34;编辑/添加样式到div因为这是从其他来源生成的。我想做的就是不要让bootstrap添加特定元素及其子元素的样式。

任何建议都会有很大的帮助。

Answer 1

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

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

应该有足够的specificity覆盖Bootstrap的样式。注意 - 您需要将此CSS放在Bootstraps CSS文件下面。

对于您想要覆盖的任何样式 - 只需为相关规则添加更多特异性，或者复制它并替换您感兴趣的属性。只要您的CSS放在Bootstraps之后，任何规则都将替换已经指定的规则

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

1 个答案: