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高于伪选择器？

回答

相关问题