爲什麼這個CSS重寫這個另一個？

的site.css是下面列出了jQuery UI的CSS

我有一個鏈接，看起來像這樣在我的網頁上：

<a class='closeClueTipLink'>close</a>

問題是，李nk顯示黑色而不是正常的藍色文本。當我使用螢火找出原因，我看到：

enter image description here

我不明白爲什麼的.ui小部件內容（具有顏色＃222222）是壓倒.closeClueTipLink （如顏色：藍色），因爲site.css位於jquery之下。

任何想法或建議，爲什麼這個順序發生？

2012-03-30 leora

因爲有一個a選擇剛剛.ui-widget-content後：

.ui-widget-content a

使其更specific比.closeClueTipLink，即使.closeClueTipLink在後面的樣式表中。

您可以輕鬆地通過向您的其他規則中添加相同類型選擇器來平衡這一點，因此您可以獲得a.closeClueTipLink，從而使兩個選擇器具有同樣的特定性（1類和1類）。然後，作爲稍後定義和加載的規則，將應用並且您的鏈接文本將爲藍色。

2012-03-30 12:36:43 BoltClock

+1的特異性。但是，您尚未解決問題。 – Curt 2012-03-30 12:37:23

我選擇首先回答「爲什麼」，因爲這是唯一被問到的問題。無論如何，我已經在一個解決方案。 – BoltClock 2012-03-30 12:38:20

祝賀100k！ – thirtydot 2012-03-31 00:05:47

~~因爲 .ui-content-content a { }在之前的樣式 .closeClueTipLink之後加載。~~

~~我敢肯定 jquery...tom.css是 site.css後加載，所以後來定義的樣式將覆蓋前面定義的樣式。~~

有辦法你修改這個問題：

2012-03-30 12:36:28 Starx

快速修復：

添加一個「A」類選擇前：

a.closeClueTipLink {

說明：

它與Specificity [details]做。

.ui-widget-content a更「具體」，因爲它引用類和元素，而不是引用類的元素。因此，無論代碼的位置/位置如何，.ui-widget-content a都會覆蓋任何不太具體的內容。

通過在選擇器之前添加一個「a」，可以讓它也引用一個元素和一個類，因此它不再具體並且將使用位置來確定。

實施例：

/* css */ 
div p { color: red; } 
p { color: blue; } 

<!-- html --> 
<div><p>Text</p></div>

在上面的段落中的文本將是紅色因爲第一CSS項比所述第二更具體。

2012-03-30 12:36:51 Dave

錯誤。它應該是「a.closeClueTip」 – Turnip 2012-03-30 12:41:21

固定。在輸入時，我正在複製.ui-widget之一，忘記了看它與選擇器的區別。 – Dave 2012-03-30 12:43:08

.ui-widget-content a比.closeClueTipLink更具體，因此將在此改變它，不管它們被放置在什麼樣的順序。

更改它讀取

a.closeClueTipLink

2012-03-30 12:38:33 Turnip

回答