CSS特異性：意外的行爲

我一直在遵循關於CSS特定性的this article。它將值分配給選擇器，具有最高值的選擇器將具有優先權。CSS特異性：意外的行爲

的ID具有100 的值的類具有10

值我的問題是在這個例子中我嘗試。

HTML

<div id="id" class="a b c d e f g h i j k l">What color?</div>

CSS

/* calculated specificity: 100 */ 
#id{ 
    color:red; 
} 

/* calculated specificity: 120 */ 
.a.b.c.d.e.f.g.h.i.j.k.l{ 
    color:green; 
}

我預期的股利是綠色的，因爲12個班將有120的價值，但它是紅色的，當我運行它。我的計算有問題嗎？

在那篇文章中，它對於撲克玩家（它很整潔）具有CSS特異性，它具體說道：「就像任何三對三打一對，使用ID選擇器的CSS規則都會違反規則「所以，如果你有20個班級，那麼ID並不重要。 – snollygolly

@SLoW因此，如果id總是擊敗class，那麼賦值和加總的概念就沒有意義了。是對的嗎？ – Sionnach733

是的，我個人不會打擾分配一堆類來覆蓋和ID分配。我只是給它一個不同的ID併爲自己節省一些麻煩。 :) – snollygolly

ID勝過類特異性MDN states：

以下選擇的列表是通過增加特異性：

通用選擇

類型選擇

類選擇
個
屬性選擇

僞類

ID選擇

內嵌樣式

特異性計算可能有點令人困惑，但你必須記住，作爲W3 states，當計算連接的特異性，而不是將數字相加。

因此，例如：

所以是的，ID每次都會超過純粹的課程選擇。

2014-02-12 14:22:47 j08691

作爲euchre粉絲我+1使用王牌 – Huangism

在這種情況下，說價值體系有缺陷是否公平？ – Sionnach733

@ Sionnach733 - 我在我的答案中加了一點解釋。 – j08691

回答