代码段

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>

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

但是，如果我在font-style: italic;

下添加了#divAdvert，则斜体有效

为什么？

Answer 1

您已使用font定义了 CSS 的#divAdvert属性，并且它优先于仅.newStyle的{{1}}，如果您需要要添加/更改 CSS 中的任何子属性，您需要将其定义为下面的代码片段：

代码段

font-style

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

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

Answer 2

我认为此链接可以帮助您，并为您的问题提供另一种解释 How do I make a class take precedence over an id?

你所遇到的是http://www.w3.org/TR/CSS2/cascade.html#specificity问题。

.wider具有0,0,1,0的特异性，而#normal具有0,1,0,0。你不能用ID以外的任何东西（或内联定义，但在这里不是这种情况）击败ID。

如果您不能在width选择器中添加所需的#normal声明，我建议将其放在#normal.wider中，或者，如果不可能，有一个标识的容器，比如#container，在层次结构中尽可能高（可能是正文上的ID？）并将.wider替换为#container .wider。这个新选择器的特异性为0,1,1,0，略高于0,1,0,0。

使用!important也可以，但它只能作为最后的手段使用。

示例：

<div id="container" class="wrapper">
<div id="normal" class="wider">
</div>

对于这个HTML片段，一些可能的选择器按特异性降序排列：

    CSS Selector         -> Specificity
---------------------------------------
#container #normal   -> 0,2,0,0
#container .wider    -> 0,1,1,0 // These two have the same specificity so
#normal.wider        -> 0,1,1,0 // the last declared value will be used
#normal              -> 0,1,0,0
.wrapper .wider      -> 0,0,2,0
.wider               -> 0,0,1,0

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

代码段

2 个答案:

代码段