Question

我正在使用Beginning Javascript Book中的练习。我坚持练习，我使用DOM为元素添加一个类来改变文本的样式。当我在Chrome中打开此页面时，div元素带有下划线但不是斜体。我的代码出了什么问题？

<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>

Answer 1

尝试使样式更具体，因此字体样式在id选择器中没有优先权

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

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

@Kaiido在评论中解释了为什么这有效。

当你使用短手＆＃34;字体＆＃34;你实际上设置了多种样式，例如font-size和font-family，如你在示例中所示。但它也可用于设置其他字体属性，如font-weight，font-style等。如果您未在该简短样式规则中传递值，则会获得默认值。您的课程没有覆盖它的原因是因为您的ID选择器将字体样式设置为默认值，而您的类选择器将其设置为斜体。但是，id选择器具有比类选择器更高的特异性，因此其规则优先。更改id选择器以不设置字体样式（通过使用短手＆＃34; font＆＃34;规则时应用的默认值）允许类应用字体样式规则。 @Kaiido提到的另一个解决方案是让类选择器具有比id选择器更高的特异性，可以这样做：

    #divAdvert {
        font: 12pt Verdana;
    }

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

因为您现在使选择器的类比id选择器更具体，所以它的规则将覆盖原始的id选择器。

Answer 2

在CSS中使用C*exp(anything)时，这是包含font在内的多项内容的快捷方式。默认设置为font-style，这就是为什么没有设置的原因。您的normal被覆盖，因为ID具有比类更高的特异性。

它的一个方法是专门设置你的字体属性。

.new-style

此外，您应该知道#divAdvert { font-size: 12px; font-family: Verdana; }是用于打印的，不应该用于网络。

Answer 3

重要的是字体样式

#divAdvert {
        font: 12pt Verdana;
    }

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

https://jsfiddle.net/z402o3bL/

Answer 4

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

这不是最好的做法，但它有效。！重要只在你需要覆盖样式时使用它。

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

4 个答案: