斜體字體樣式不適用於元素的類屬性

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> 

上面的結果是“這是一個廣告”，帶有下划線但沒有斜體字體樣式。

但是，如果我包含font-style: italic; ，則斜體有效font-style: italic; 在#divAdvert

這是為什么？

Answer 1

您已使用#divAdvert定義了CSS的 font屬性，並且它優先於僅具有font-style .newStyle ，因此如果要在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> 

Answer 2

我認為此鏈接將幫助您並為您的問題提供另一種解釋如何使類優先於ID？

你有什么是http://www.w3.org/TR/CSS2/cascade.html#specificity問題。

.wider具有特異性0,0,1,0而#normal有0,1,0,0 。 除了ID（或內聯定義之外），您不能使用除ID以外的任何其他ID，但這不是這種情況。

如果你不能在#normal選擇器中放置所需的width聲明，我建議將它放在#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