字體樣式的CSS不適用於HTML元素

Question

我正在通過“入門Java腳本”中的練習進行練習。 我堅持使用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在解釋為什么這樣做的評論中指出了一個好觀點。

當您使用速記“字體”樣式時，實際上是在設置示例中顯示的多種樣式，例如font-size和font-family。 但是它也可以用於設置其他字體屬性，例如font-weight，font-style等。如果您在該簡短樣式規則中未傳遞值，它將獲取默認值。 您的類之所以沒有覆蓋它，是因為您的id選擇器將字體樣式設置為默認值，而您的類選擇器將其樣式設置為斜體。 但是，id選擇器比類選擇器具有更高的特異性，因此其規則優先。 更改id選擇器以不設置字體樣式（通過使用速記“字體”規則時所應用的默認值）可以使該類應用字體樣式規則。 @Kaiido提到的另一種解決方案是僅使類選擇器具有比id選擇器更高的特異性，可以這樣進行：

    #divAdvert {
        font: 12pt Verdana;
    }

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

因為您現在已經使類的選擇器比單獨的id選擇器更具體，所以其規則將覆蓋原始的id選擇器。

Answer 2

當您在CSS中使用font時，這是一些簡單的屬性，包括font-style 。 默認設置是normal ，這就是為什么未設置默認設置的原因。 您的.new-style會被覆蓋，因為ID具有比類更高的特異性。

解決它的一種方法是專門設置字體屬性。

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

此外，您應該知道pt是用於打印的，不應用於網絡。

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

這不是最佳實踐，但可以。 ！important僅在需要覆蓋樣式時才使用它。

字體樣式的CSS不適用於HTML元素

問題描述

4 個解決方案

解決方案1
4 2017-07-19 02:17:43

解決方案2
1 已采納 2017-07-19 02:22:09

解決方案3
0 2017-07-19 02:18:57

解決方案4
0 2017-07-19 02:20:09

字體樣式的CSS不適用於HTML元素

問題描述

4 個解決方案

解決方案1 4 2017-07-19 02:17:43

解決方案2 1 已采納 2017-07-19 02:22:09

解決方案3 0 2017-07-19 02:18:57

解決方案4 0 2017-07-19 02:20:09

解決方案1
4 2017-07-19 02:17:43

解決方案2
1 已采納 2017-07-19 02:22:09

解決方案3
0 2017-07-19 02:18:57

解決方案4
0 2017-07-19 02:20:09