更改元素的文本颜色无效

Question

我正在尝试使用下面的代码中的类.highlight更改div的文本颜色，但它无效。

我做错了什么？

.highlight {
  font-color: #FF3300;
  font-style: oblique;
  line-height: 20%;
}

<div class="highlight">
  <h4>ASSOCIATED PRESS</h4>
</div>
<br>
<h3 style="line-height:100%">4.6/5</h3>
<div class="highlight">
  <h4>GOODREADS</h4>
</div>

Answer 1

您无法更改文本颜色，因为font-color不是有效的CSS属性。要设置元素文本内容的前景色，请使用color CSS属性。

.highlight {
  color: #FF3300;
  font-style: oblique;
  line-height: 20%;
}

<div class="highlight">
  <h4>ASSOCIATED PRESS</h4>
</div>
<br>
<h3 style="line-height:100%">4.6/5</h3>
<div class="highlight">
  <h4>GOODREADS</h4>
</div>

Answer 2

将css更改为

.highlight h4 {
color: #FF3300;
font-style: oblique;
line-height: 20%;
}

Answer 3

更改CSS

.highlight {
color: #FF3300;
font-style: oblique;
line-height: 20%;
}

https://jsfiddle.net/5mr2wLgy/

Answer 4

添加

h4 {
  color: #FF3300;
  font-style: oblique;
  line-height: 20%;
}

或

.highlight h4 {
  color: #FF3300;
  font-style: oblique;
  line-height: 20%;
}