使用jQuery覆盖nth-child伪类样式的问题求助

你遇到的核心问题是样式作用的元素层级不对：你给选中的<tr>加了背景色，但之前的奇偶行样式是直接设置在<td>上的——<td>作为<tr>的子元素，它的背景色会完全覆盖掉父元素<tr>的背景色，所以哪怕你给<tr>加了蓝色背景，也会被<td>的白色/浅灰色盖住，只能看到字体加粗的效果。

下面给你两个可行的解决方案：

方案1：调整选中样式的作用对象到<td> #

修改你的CSS，让选中行的<td>样式优先级高于奇偶行的样式：

table tr:nth-child(odd) td { background-color: #fff; }
table tr:nth-child(even) td { background-color: #F8F8F8; }
/* 改为针对选中行内的td设置样式，优先级更高 */
table tr.tableRow_selected td {
    background-color: blue;
    font-weight: bold;
}

这个方案里，table tr.tableRow_selected td的选择器特异性比table tr:nth-child(odd) td更高，所以不需要!important也能覆盖原来的奇偶行样式，当然如果怕有其他样式干扰，保留!important也没问题。

方案2：把奇偶行的背景色移到<tr>上 #

如果你的<td>没有额外的背景样式，可以直接把奇偶行的背景色设置在<tr>上，这样选中类的<tr>背景色就能直接覆盖：

/* 把背景色设置在tr元素上 */
table tr:nth-child(odd) { background-color: #fff; }
table tr:nth-child(even) { background-color: #F8F8F8; }
.tableRow_selected {
    background-color: blue !important;
    font-weight: bold;
}

这个方案更简洁，减少了对<td>的样式控制，只要你的<td>没有设置背景色，<tr>的背景会自然透出来。

你的jQuery代码是完全没问题的，不需要修改，只要调整CSS部分就能实现点击行变蓝色背景的效果。

内容的提问来源于stack exchange，提问作者dutchkillsg