我如何給一個CSS類優先級的ID？

#idname{ 
 
    border: 2px solid black; 
 
} 
 

 
.classname{ 
 
    border: 2px solid gray; 
 
}

<div id = "idname" class="classname">it is a test</div>

我想給一個更大的優先考慮它的CSS類，而不是它的CSS ID。可能嗎？ （在其他的話，我想設置gray - 顏色爲border）

2016-02-26 Shafizadeh

我不明白你的問題。如果您不想將黑色邊框賦予'idname'元素，那麼爲什麼要編寫該規則？ – 2016-02-26 17:44:32

@torazaburo'＃idname'塊中的所有屬性都是當前屬性。但有時我需要向名爲'.active' *（在本例中名爲'.classname'）*的元素添加一個類來更改某些屬性。 – Shafizadeh

不要使用!important，因爲它是最糟糕的解決方案，如果你想切換的造型那麼這樣做的。

#idname{ 
 
    border: 2px solid black; 
 
} 
 

 
#idname.classname { 
 
    border: 2px solid gray; 
 
}

<div id = "idname" class="classname">it is a test</div>

如果您還想目標與類classname其他元素，而不僅僅是#idname然後使用：

#idname.classname, .classname { 
    border: 2px solid gray; 
}

2016-02-26 16:58:34

完美的解決方案..謝謝。 +1 – Shafizadeh

你實際上問的是怎麼給一類較高特異性比ID。

的ID具有100的相對高的特異性的一類具有10

特異性有許多方法，以增加選擇的特異性。

這裏有幾個方法：

#idname.classname

現在，這個選擇器具有的110

div#idname.classname

特異性現在，這個選擇器具有的111特異性（因爲一個元素有一個特異性1）。

div[class="classname"]

這個選擇器將無法覆蓋的ID選擇器，因爲屬性選擇具有10特異性，併爲選擇的總特異性只有11

雖然特異性適用於選擇器，但!important註釋適用於聲明。它有權力覆蓋所有特異性點。

.classname { ... !important; }

你能想到的!important作爲具有10000特異性，如在此specificity website所示。雖然技術上!important不參與特異性。

的更多信息：

2016-02-26 17:06:15

好的解釋...謝謝+1 – Shafizadeh

你倒退這個問題。 CSS規則具有權重，您應該利用這些規則來正確地級聯樣式。

element = 1 pt 
class = 10 pt 
id = 100 pt 
inline = 1000 pt 
!important = 10,000 pt

的!important條款，而這肯定工作，建立僵化到您的級聯規則，它變得太容易做到與競爭指令結束。

我的基本原則是「通常」避免在CSS中使用ID s，並且只有在需要覆蓋現有的類/元素規則時才使用它們。

最後，你是作者。將您的不太具體的規則寫爲class，並用ID覆蓋它。

從我14多年的建設網絡的東西：如果你必須使用!important條款，你做錯了。我覺得它很臭。

有人說有時會發生。你繼承了別人可怕的CSS，這很難避免。

2016-02-26 17:07:38 Bosworth99

'！important'的特殊性不是10,000（儘管人們可以這麼想）。實際上，「重要」根本就沒有特異性。特殊性僅適用於選擇器，'！important'不是選擇器（這是一條規則）。 –

一點點其他的解決方法解決方案，在某些情況下可以幫助是使用

div[id=idname]{ 
    border: 2px solid black; 
} 
.classname{ 
    border: 2px solid grey; 
}

我需要它在一拖&降小遊戲

2018-01-26 20:54:14

回答