什么定义了我的字体颜色？答案

【问题标题】：What's defining my font color?什么定义了我的字体颜色？
【发布时间】：2017-10-10 05:22:19
【问题描述】：

我无法更改标签的字体颜色。我认为这与特异性有关，但我无法做出任何改变来改变它。

这是代码：

<header class="header" id="top">
  <div class="text-vertical-center">
    <h1>Reclamar não muda</h1>
    <h3>Free Bootstrap Themes &amp; Templates</h3>
    <br>
    <a href="#about" class="btn btn-dark btn-lg js-scroll-trigger">Find Out More</a>
  </div>
</header>

显然，这段代码嵌套在<html>和<body>标签内。这些是显示的所有类和 id 的相应 css：

html,
body {
    width: 100%;
    height: 100%;
}

body {
    font-family: 'Source Sans Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
.header {
    position: relative;
    display: table;
    width: 100%;
    height: 100%;
    background: url(../img/bg2) no-repeat center center scroll;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

.text-vertical-center {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}

.text-vertical-center h1 {
    font-size: 4.5em;
    font-weight: 700;
    margin: 0;
    padding: 0;
}

.about {
    padding: 50px 0;
}

当我尝试更改文本 Reclamar não muda（如果您想知道的话，用葡萄牙语）的颜色时，实际上它是某种灰色阴影，没有任何反应。我尝试在text-vertical-center css 代码中输入font-color: white 或font-color:#ffffff，但没有任何反应。

顺便说一句，这段代码全部来自免费的引导代码。如果您需要更多代码来回答我的问题，请说出来，我很乐意在这里输入。

【问题讨论】：

试试color -- 而不是font-color。

标签： html css twitter-bootstrap fonts

【解决方案1】：

问题在于，要更改颜色，您需要值 color，而不是 font-color。还需要注意的是，它必须使用美式拼写； colour 也不行。

您正在寻找：

.text-vertical-center h1 {
  color: #ffffff;
}

这是一个工作示例（用黑色背景来演示）：

html,
body {
  width: 100%;
  height: 100%;
}

body {
  font-family: 'Source Sans Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.header {
  position: relative;
  display: table;
  width: 100%;
  height: 100%;
  background: black;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.text-vertical-center {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

.text-vertical-center h1 {
  font-size: 4.5em;
  font-weight: 700;
  margin: 0;
  padding: 0;
  color: #ffffff;
}

.about {
  padding: 50px 0;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<header class="header" id="top">
  <div class="text-vertical-center">
    <h1>Reclamar não muda</h1>
    <h3>Free Bootstrap Themes &amp; Templates</h3>
    <br>
    <a href="#about" class="btn btn-dark btn-lg js-scroll-trigger">Find Out More</a>
  </div>
</header>

希望这会有所帮助！ :)

【讨论】：

您好，感谢您的快速回答。我刚刚按照您的建议更改了.text-vertical-center h1，但字体仍然是灰色的。实际上，文字甚至缩小了很多：/
更正：当我将color: #ffffff 放在.text-vertical-center 上时它起作用了，但它仍然很小。我试图改变font-size，但我认为这没有帮助
如果你把它放在.text-vertical-center h1上，只有主标题会改变。如果你把它放在.text-vertical-center 上，两个标题都会改变。如果您想更改主标题的font-size，font-size 声明必须在.text-vertical-center h1 上，因为它已经在那里定义，并且具有更高的特异性（或者，您可以删除该声明）。
这是我的实际代码： .text-vertical-center { display: table-cell;文本对齐：居中；垂直对齐：中间；颜色：#ffffff； } .text-vertical-center h1 { font-weight: 700;边距：0；填充：0；字体大小：4.5em；这给了我一个不是最初的字体（我认为它是 source sans，但现在它是 helvetica，在body 的 font-family 行中的第二个）和一个非常小的 h1（对不起，糟糕的格式，对stackoverflow有点新）
修改font-size: 4.5em确实会让你的主标题变大。不要忘记，您实际上需要使用@font-face 在页面上包含您的字体才能显示出来。并且不用担心格式，但请注意您可以使用反引号（`）来格式化代码:)

【解决方案2】：

Bootstrap 有自己的h1 样式，可能会覆盖您的样式。此外，您正在错误地更改颜色。试试：

.text-vertical-center h1 {color:#ffffff}

【讨论】：