如何使用 CSS 文件在引导程序中更改 H3 颜色答案

【问题标题】：How to change H3 color in bootstrap using CSS file如何使用 CSS 文件在引导程序中更改 H3 颜色
【发布时间】：2015-02-27 05:18:09
【问题描述】：

我这里有一个网页：http://www.indiespil.dk/aitasi-under-construction-page/Aitasi/image/

我下载了一个 HTML 模板，我认为它正在使用 Bootstrap。我不是程序员，所以这是我第一次使用 HTML、CSS、Bootstrap 和所有类似的东西。

到目前为止，我的网页上的一切都很好，除了一件事：第二部分中的文本颜色，其中显示“竞赛”、“游戏钱包”、“独立币”和“社区”

这些词是黑色的，我需要它们是白色的。

文字被称为

就目前而言，它的颜色代码为#000000，大小为 18px。

我需要在网站上使用较低的 h3，但我想制作一个与 h3 大小相同但为白色的自定义标题（例如 h7）。

我尝试制作一个 h7，它实际上是白色的，大小相同，但是当我在索引文件中输入 h7 时，它没有对齐，就像其余的一样。

我怎样才能让它正确对齐？

谢谢。

【问题讨论】：

imgur.com/t9Xah0o 你有一些你没有开始的完成标签。如果你有firefox浏览器，用ctrl+u打开源码，查看源码。

标签： css twitter-bootstrap colors header

【解决方案1】：

从它的样子来看，我猜 h7 标签没有对齐，因为 h3 元素前面是 .service 类。如果你想制作一个 h7，你必须确保它在 css 中的 h7 标记之前有一个 .service 类。 h3 标签的设置如下：

.service h3{
    color: #000000;
    font-size: 18px;
    text-transform: uppercase;
}

你会想做这样的事情：

.service h7{
    color: #FFFFFF;
    font-size: 18px;
    text-transform: uppercase;
}

希望对您有所帮助。

【讨论】：

【解决方案2】：

当像这样更改颜色时，您不需要创建 H7 标题元素，只需将 !important 规则添加到您的 css 中的单独类。

HTML

<h3 class="whiteTextOverride"> example with white text override </h3> 
<h3> example with default colour </h3>

CSS

.whiteTextOverride
{
 color: white !important;
}

这将覆盖引导程序设置的颜色，并允许您仅为该标题中的文本选择特定颜色。

附：值得一提的是，您不应该对 css 中的 !important 功能发疯，因为如果您不小心使用它，它会影响其他类，因此请尽量少用它，并查看this关于何时使用它的文章。祝你好运！

示例

h3
{
 color: red;   
}

.whiteTextOverride
{
 color: white !important;
}

.darkBackground
{
  background: #000000;
}

<div class="darkBackground">
  <h3 class="whiteTextOverride"> example with white text override </h3> 
  <h3> example with default colour </h3> 
</div>

【讨论】：