javascript - 斜体字体样式不适用于元素的类属性

Question

我正在做一个简单的练习:通过将元素与 class 相关联来更改 font-style。

代码片段

var divAdvert = document.getElementById("divAdvert");
divAdvert.className = "newStyle";

#divAdvert {
  font: 12pt arial;
}
.newStyle {
  font-style: italic;
  text-decoration: underline;
}

<div id="divAdvert">Here is an advertisement</div>

上面的结果是带有下划线但没有斜体字体样式的“这是一则广告”。

但是，如果我在 #divAdvert 下包含 font-style: italic;，斜体就可以工作了

这是为什么？

Answer 1

您已经使用 #divAdvert 定义了 CSS 的 font 属性，它优先于您的 .newStyle只有 font-style 所以如果你想在 CSS 中添加/改变任何子属性你需要定义如下我的代码片段:

代码片段

var divAdvert = document.getElementById("divAdvert");
divAdvert.className = "newStyle";

#divAdvert {
  font-size: 12pt;
  font-family: 'Arial', sans-serif;
}
.newStyle {
  font-style: italic;
  text-decoration: underline;
}

<div id="divAdvert">Here is an advertisement</div>