CSS選擇器優先級 - 爲什麼td高於僞選擇器？

看看這個小提琴：http://jsfiddle.net/czz2ejfw/1 CSS選擇器優先級 - 爲什麼td高於僞選擇器？

風格爲我的表：

td { 
    color: #669; 
} 
tbody tr:hover { 
    color: red; 
}

的文本顏色應該是紅色的，當我們徘徊。事實上，如果你看看開發者工具，你會發現應該應用紅色。但令人難以置信的是，它顯示爲＃669。 WTH？

這是整個火狐，Chrome，Safari和Opera相一致。

來源

2014-08-27 Rap

因爲風格上'td'對於實際獲得樣式的單元更具體。當規則設置爲'tbody tr：hover td {}'時，您會注意到不同之處。 – Harry 2014-08-27 15:52:00

這是一個可怕的背景文字顏色組合，只是說。 – SeinopSys 2014-08-27 15:53:54

@ DJDavid98你有什麼反對熱狗色彩方案？ – 2014-08-27 15:54:15

這不是更加具體。它匹配不同的元素。

td { color: #669; }覆蓋默認樣式表（可能類似於td { color: inherit; }），因爲作者樣式表會覆蓋瀏覽器樣式表。

如果要在tr懸停時匹配td，則需要在選擇器中提及td（例如，使用後代組合器）。

tbody tr:hover td {}

來源

2014-08-27 15:53:58 Quentin

的確如此。我的意思是說*特定的*，因爲在明確賦值（對'td'）有一個非常具體的值，它將優先於默認樣式表。如果'td'上的'color'不存在，'tr：hover'本身會產生紅色。但可能是錯誤的選擇。 – Harry 2014-08-27 16:01:08

<tr>正在獲得color:red;，但沒有什麼可以被稱爲紅色。

相反，你需要做到這一點，它適用紅色所有<td>細胞是父<tr>的孩子：

tbody tr:hover { 
    background-color: yellow; 
} 

tbody tr:hover td { 
    color: red; 
}

JS Fiddle Demo

來源

2014-08-27 15:53:21 Dan

你不應該與別人編輯你的答案。 – 2014-08-27 16:00:05

我沒有...我有一個稍微不同的答案，這是正確的，然後我編輯它來改善它。我原來的答案是造型個人''，我調整它的風格整個行。 – Dan 2014-08-27 16:00:43

你的舊回答不正確，它改變了細胞的顏色，但Rap想要的是改變行顏色 – 2014-08-27 16:01:43

正如其實已經在註釋中說，該td是tr的孩子，所以雖然的tr變化的背景下，如果你不能看到它的任何地方，因爲沒有td的是透明的你不會得到任何地方。因此，正確的解決方案是將td的transparent（默認值）設置爲tr，或者使用tr:hover td{}覆蓋td的樣式，而不是對tr進行樣式設置。

來源

2014-08-27 15:55:25 user2908232

更新你的CSS來此的一部分，它的工作：

tbody tr:hover { 
    background-color: yellow; 
} 
tbody tr:hover td{ 
    color: red; 
}

紅色是你的版本更高的優先級，因爲它是具體的td的tbody tr不是具體

來源

2014-08-27 15:55:48

爲什麼投票？ – 2014-08-27 15:58:04

儘量不要使用「特定」一詞，因爲這意味着特殊性在發揮作用。 'tbody tr'比'td'具有更高的特異性。特異性不是決定性因素。 – Alohci 2014-08-27 16:02:52

我不確定您是否知道CSS權重，具體取決於選擇器對於您要定位的元素的特定程度。這取決於很多。 – 2014-08-27 16:05:23

CSS選擇器優先級 - 爲什麼td高於僞選擇器？

回答

相關問題