twitter-bootstrap 如何使用 CSS 文件在 bootstrap 中更改 H3 颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27715663/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to change H3 color in bootstrap using CSS file
提问by Emil Fr?lund
I have a webpage here: http://www.indiespil.dk/aitasi-under-construction-page/Aitasi/image/
我在这里有一个网页：http: //www.indiespil.dk/aitasi-under-construction-page/Aitasi/image/
I downloaded a HTML template, and I think it is using Bootstrap. I am no programmer, so this is the first time I am using HTML, CSS, Bootstrap and all that kind of stuff.
我下载了一个 HTML 模板，我认为它正在使用 Bootstrap。我不是程序员，所以这是我第一次使用 HTML、CSS、Bootstrap 和所有这些东西。
Everything is perfectly okay on my webpage as for now, except 1 thing: the text color in the second section, where it says "Competition", "Game wallet", "Indie Coins" and "Community"
就目前而言，我网页上的一切都很好，除了一件事：第二部分中的文本颜色，上面写着“竞争”、“游戏钱包”、“独立硬币”和“社区”
These words are black, and I need them to be white instead.
这些词是黑色的，我需要它们是白色的。
The text is called
文字被称为
至于现在，它的颜色代码为#000000，大小为 18px。I need the h3 to be used lower on the website, but I would like to make a custom header (h7 for instance) that has the same size as h3, but is white instead.
我需要在网站上使用较低的 h3，但我想制作一个与 h3 大小相同的自定义标题（例如 h7），但改为白色。
I tried making a h7 and it actually came out white and the same size, but when I entered h7 in my index file it didn't align, as the rest.
我尝试制作一个 h7，它实际上是白色的，大小相同，但是当我在我的索引文件中输入 h7 时，它没有对齐，其余部分。
How can I make it align properly?
我怎样才能让它正确对齐？
Thanks.
谢谢。
回答by Master Yoda
You dont need to create an H7 header element simply add the !importantrule to a separate class in your css when changing the colour like this.
!important当像这样更改颜色时，您不需要创建 H7 标题元素，只需将规则添加到 css 中的单独类。
HTML
HTML
<h3 class="whiteTextOverride"> example with white text override </h3>
<h3> example with default colour </h3>
CSS
CSS
.whiteTextOverride
{
color: white !important;
}
This will override the colour set by bootstrap and allow you to choose a specific colour for the text in that header only.
这将覆盖引导程序设置的颜色，并允许您仅为该标题中的文本选择特定颜色。
P.S. its worth mentioning that you shouldnt go crazy with the !important feature in css as it can affect other classes if you are not careful with it so use it minimally and have a look at thisarticle on when you should use it. Good luck!
PS 值得一提的是，你不应该对 css 中的 !important 特性感到疯狂，因为如果你不小心它会影响其他类，所以尽量少用它，看看这篇文章你应该何时使用它。祝你好运！
Example
例子
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>回答by kb8771
From what it looks like, I'm guessing the h7 tag was not aligned because the h3 element is preceded by the .service class. If you want to make a h7 you have to make sure it has a class of .service before the h7 tag in the css. The h3 tag is setup like so:
从它的样子来看，我猜 h7 标签没有对齐，因为 h3 元素前面是 .service 类。如果你想制作一个 h7，你必须确保它在 css 中的 h7 标签之前有一个 .service 类。h3 标签设置如下：
.service h3{
color: #000000;
font-size: 18px;
text-transform: uppercase;
}
You'd want to do something like this:
你想要做这样的事情：
.service h7{
color: #FFFFFF;
font-size: 18px;
text-transform: uppercase;
}
Hope that helps.
希望有帮助。
