html - Bootstrap.css 与我的自定义设置冲突

Question

我有一些自定义的 CSS 设置来让我的标题看起来像这样:

这是我的自定义设置:

h2 {
    background-color: #665d5d;
    border-bottom: 1px solid #d4d4d4;
    border-top: 1px solid #d4d4d4;
    border-radius: 5px;
    color: #fff;
    font-size: 1.1em;
    margin: 12px;
    padding: 0.3em 1em;
    text-align: center;
}

在我引用 bootstrap.css 之后，我的标题变成了比我想要的更大的字体:

为了解决这个问题，我可以在 HTML 的每个 h2 中指定字体:

<h2 style="font-size: 1.1em;">

但我知道这不是处理这个问题的正确方法。既然它与 bootstrap 冲突，我该如何为我的 header 使用我的自定义 h2 设置？

Answer 1

1. 在 Bootstrap 声明之后声明您的 css。不要在 Bootstrap 中重新定义 H2 或任何其他元素，除非你真的想要它。为 H2 元素定义您自己的 css 类，并将其应用于您希望拥有自定义样式的 H2 标签。
2. 没有帮助？使用 !important

另请阅读 https://stackoverflow.com/a/8672691/313199

例子:

在 CSS 中:

h2.myHeader { font-size: 1.1em; }

在 HTML 中:

<h2 class="myHeader">