CSS和jQuery-如何强制2个规则协同工作

Question

我有一个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”规则工作？

Answer 1

在规则中添加！重要的

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;
}

演示：小提琴