我有一个html表。我需要2条规则来起作用：
>
鼠标在表格行上应更改背景颜色。
1列中的单元格应根据单元格内容使用不同的颜色，例如-如果cell=“green”中的值，则背景应为绿色。
对于第一条规则，我在CSS中做了规则：
tr:hover
{
background: brown;
}
对于第二个--我附加了jQuery2.0.3并添加了js函数，它为TD创建类“color”：
$(document).ready(function(){
$('td.color').each(function(){
var x = $(this).text().trim();
if ( x === "Green" ) $(this).css({background: 'green'});
else if (x === "Yellow") $(this).css({background: 'yellow'}) ;
else if (x === "Red") $(this).css({background: 'red'}) ;
});
});
表的html为：
<table>
<tr class='tr'>
<td class='td'>Name1</td>
<td class='td'>Green</td>
<td class='color'>Green</td>
</tr>
<tr class='tr'>
<td class='td'>Name2</td>
<td class='td'>Yellow</td>
<td class='color'>Yellow</td>
</tr>
<tr class='tr'>
<td class='td'>Name3</td>
<td class='td'>Red</td>
<td class='color'>Red</td>
</tr>
</table>
（类颜色仅分配给最后一列）
您可以在这里看到具有结果的示例:http://jsfidle.net/bm5aw/7/
因此，最后一列中的背景颜色取决于文本值，而表格行在事件上改变鼠标的背景颜色。但是最后一列在鼠标上没有改变颜色，我理解这是因为js脚本中的“td”规则覆盖了CSS中的“tr”规则。如果同时声明了“TD”规则，如何强制“TR”规则工作？
在规则中添加！重要的
tr:hover, tr:hover td {
background: brown !important;
}
演示：小提琴
问题是您将内联样式应用于最后一个td元素，该元素的样式优先于tr元素的样式。
另一个选项是使用类选择器应用颜色
$(document).ready(function () {
$('td.color').addClass(function(){
return $.trim($(this).text()).toLowerCase()
})
});
然后
tr:hover, tr:hover td {
background: brown;
}
td.green {
background: green;
}
td.yellow {
background: yellow;
}
td.red {
background: red;
}
演示：小提琴
