不适用于HTML元素的字体样式的CSS

我正在开始使用Javascript书籍中的练习。我被困在一个练习中，我使用DOM向一个元素添加一个类来改变文本的样式。当我在Chrome中打开此页面时，div元素加下划线但不是斜体。我的代码有什么问题？不适用于HTML元素的字体样式的CSS

<head> 
    <title>Chapter 9, Example 5</title> 
    <style> 
     #divAdvert { 
      font: 12pt Verdana; 
     } 

     .new-style { 
      font-style: italic; 
      text-decoration: underline; 
     } 
    </style> 
</head> 

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

    <script> 
     var divAdvert = document.getElementById("divAdvert"); 
     divAdvert.className = "new-style"; 
    </script> 
</body> 

</html>

来源

2017-07-19 Danny S.

当您在CSS中使用font时，这是包括font-style在内的多种东西的捷径属性。缺省值为normal，这就是未设置的原因。您的.new-style被重写，因为ID具有比类更高的特异性。

其中一个方法是专门设置字体属性。

#divAdvert { 
     font-size: 12px; 
     font-family: Verdana; 
    }

此外，您应该知道pt是用于打印，不应该用于网络。

来源

2017-07-19 02:22:09 Rob

这不是*唯一的方法*，你也可以给选择器更多的重要性，甚至滥用'！important'关键字，而后者是不推荐的。 – Kaiido

这个答案完全正确。 +1。 – Rounin

尝试使风格更加具体，以便于id选择的字体样式不给予优先

<style> 
#divAdvert { 
    font-size: 12pt; 
    font-family: Verdana; 
} 

.new-style { 
    font-style: italic; 
    text-decoration: underline; 
} 
</style>

@Kaiido约解释为什么评论做出好点这工作。

当您使用短手“字体”样式时，您实际上设置了多个样式，如字体大小和字体系列，如您在示例中所示。但它也可以用来设置其他字体属性，如字体重量，字体样式等。如果您没有在该短手样式规则中传递值，它将获得默认值。你的类没有覆盖它的原因是你的id选择器将font-style设置为默认值，并且你的类选择器将它设置为斜体。但是，id选择器比类选择器具有更高的特性，所以它的规则优先。将id选择器更改为不设置字体样式（通过在使用短手“font”规则时应用的默认值）允许类应用字体样式规则。另一种方案为@Kaiido提到的是只让类选择具有比id选择可能这样做更高的特异性：

#divAdvert { 
     font: 12pt Verdana; 
    } 

    #divAdvert.new-style { 
     font-style: italic; 
     text-decoration: underline; 
    }

因为你现在带班比更具体的选择id选择器，其规则将覆盖原始的id选择器。

来源

2017-07-19 02:17:43 mcgraphix

解决这个问题的根本原因的解释可能是这个答案的原因。（即解释shorthands是如何工作的）ps：另一种选择也可以在选择器中更具体（'＃divAdvert.new-style'） – Kaiido

投入字体风格的重要

#divAdvert { 
     font: 12pt Verdana; 
    } 

    .new-style { 
     font-style: italic !important; 
     text-decoration: underline; 
    }

https://jsfiddle.net/z402o3bL/

来源

2017-07-19 02:18:57

不要养成使用！重要的习惯。了解CSS特异性如何工作更好。 – mcgraphix

已接受。那只是一个解决方案。 –

.new-style { 
    font-style:italic !important; 
    text-decoration:underline; 
}

这是不是最好的做法，但它的工作原理。！重要的只有当你需要重写样式时才使用它。

来源

2017-07-19 02:20:09

不适用于HTML元素的字体样式的CSS

回答

相关问题