CSS類重複以增加特異性

按照CSS文檔： http://www.w3.org/TR/CSS21/cascade.html#specificity CSS類重複以增加特異性

特異性通過（除其他事項外）在選擇器屬性和僞類的數量來定義。

所以，我的問題是，是否有可能通過一遍又一遍地重複相同的類名來提高特異性？

例如：

會

.qtxt.qtxt.qtxt.qtxt.qtxt 
{ 
}

比

.qtxt.lalgn 
{ 
}

或

.lalgn .qtxt//(space added to create child selector) 
{ 
}

更高的特異性？

來源

2012-07-20 Georges Oates Larsen

我會猜測這將會是特定於瀏覽器的。 – 2012-07-20 02:47:45

是的，這是可能的，故意這樣做。雖然這不是在CSS2規範中提到，明確在Selectors 3 spec提到：

注：重複occurrances [原文]相同的簡單選擇的是允許的，不增加特異性。

因此瀏覽器遇到重複的簡單的選擇時，只要選擇是有效和適用必須增加特異性。這不僅適用於重複的類，還適用於重複的ID，屬性和僞類。

鑑於你的代碼，.qtxt.qtxt.qtxt.qtxt.qtxt將具有最高的特異性。其他兩個選擇器同樣具體;組合子有特異性的計算沒有關係可言：

/* 5 classes -> specificity = 0-5-0 */ 
.qtxt.qtxt.qtxt.qtxt.qtxt 

/* 2 classes -> specificity = 0-2-0 */ 
.qtxt.lalgn 

/* 2 classes -> specificity = 0-2-0 */ 
.lalgn .qtxt

而且，在你最後的選擇空間是後裔組合子; 孩子組合子是>。

來源

2012-07-20 14:11:25 BoltClock

我剛剛在Material Design Lite中遇到過它，我必須說這必須是我遇到過的最怪異的CSS意大利麪條可憎之物。我無法理解，有些人認爲在CSS庫中使用類似這樣的東西是一個好主意。 – Senthe 2016-10-25 12:44:10

-3

您不應該需要像這樣破解專用性...如果您需要強制設置值，請使用!important。

來源

2012-07-20 02:38:23 Scotty

謝謝你的建議，我很可能會使用這個，但是...我仍然不知道我的問題的答案 – 2012-07-20 02:42:31

！重要的是不能輕易使用。你必須真的認爲，真的沒有其他方式使用特異性等......只有這樣你才能使用！重要的。 – brunoais 2012-10-25 21:56:52

組合類不是黑客，它是用於提高特性的官方CSS規範。使用'！important'表示noob狀態和css的無知。很少有人使用！重要的，因爲它擊敗了CSS特異性的點。當你有5個班級都在同一個屬性上聲明'！important'時，你如何發現你的理智？我只使用'！important'作爲最後的手段，或者在處理其他noobs可怕的css和它的唯一方法，使其工作而不重寫整個圖書館 – TetraDev 2017-08-16 17:22:11

.qtxt.qtxt.qtxt將有最高的特異性...

http://jsfiddle.net/nXBTp/1/

然而，這只是個案，如果你重複類名多次，任何其他選擇，例如：

http://jsfiddle.net/nXBTp/2/

來源

2012-07-20 04:26:00 smilledge

Thankyou！ :)你出於好奇使用了什麼瀏覽器？在safari上運行，將測試firefox – 2012-07-20 05:43:22

我使用最新版本的Chrome，Firefox，Safari和IE進行了測試。每個人都得到相同的結果。 – smilledge 2012-07-20 05:53:07

此行爲只適用於瀏覽器並且是必需的。請參閱我的答案以供參考。 – BoltClock 2012-07-20 14:30:55

CSS類重複以增加特異性

回答

相關問題