CSS特異性還是繼承？

Question

我在這裏看過類似的問題，但我沒有發現一個特定的情況。

如果我讀這篇文章正確：http://css-tricks.com/specifics-on-css-specificity/

然後發生了什麼事沒有道理給我。有人可以解釋，如果這是由於地方，遺傳或特異性？我已經刪除了所有無關的CSS。

CSS

a:link {font-size:0.875em;color:#005984} 
.button {color:#fff} 

HTML而不是白色

<a class="button">Awesome call to action</a> 

我結束了與具有藍色的文本的按鈕。現在，a是一個元素，所以它應該比.button類具有更低的特異性，如果不是這樣呢？

謝謝你的時間。

Answer 1

這是由於specificity：雖然a是一個元素類型選擇比一類選擇不太具體，它是伴隨着一個:link僞類，這是同樣具體到您.button類。因此，類型+僞類將比類更具體。

這裏沒有繼承，因爲沒有父元素樣式，我可以看到它被應用到你的元素。 Inheritance是指採用父元素的樣式。當你看到鏈接顯示爲藍色而不是白色時，那就是cascade在工作，而不是繼承。

位置不是CSS術語（至少不在其術語表中），所以我不確定你的意思。

如果您需要您的號召性動作按鈕是白色的，只是給它a選擇爲好，這樣你的選擇也同樣具體和最後的聲明將優先考慮：

a:link {font-size:0.875em;color:#005984} 
a.button {color:#fff} 

Answer 2

選擇器的特異性的計算方法如下：
- 計數在選擇器ID選擇器的數目（= A）
- 計數類選擇器的數目，屬性選擇器，和僞類的選擇器（= b）的
- 計算nu類型選擇器和僞元素在選擇器（= C）
的MBER - 忽略通用選擇

否定僞類內部選擇器進行計數像任何其他，但否定本身不能算作一個僞類。

串接三個數字的A-B-C（在具有大基數的數字系統）給出的特異性。

所以：

a:link
- α= 0
- B = 1
- C = 1
- 結果= 011

.button
- a = 0時
- b = 1
- C = O
- 結果= 010

結果：a:link比.button更高。

修復：:link不會對任何東西，但a標籤反正工作，因此指定a:link是多餘的。使用:link代替，這將解決這個問題（提供.button定義後:link）