Jquery:更改斑马条纹 div 的背景颜色？

Question

我有一个 div 列表，这些 div 在 css 中是斑马条纹的(奇数 div 有浅灰色背景)。单击时，我希望 div 的背景变为蓝色。下面的代码仅在我单击偶数 div 时有效，大概是因为斑马条纹比我使用 addClass 添加的类具有更高的特异性。在我的 css 文件中交换 div.row 和 selected_row 选择器的顺序没有任何区别。

div.row div:nth-child(odd) {
  background-color: #fafafa;
}

.selectedRow {
    background-color: #338FFF;
}

$('.js-div').on('click', function (e) {
  $(e.toElement).addClass('selected_color');
}

Answer 1

只需为您的 css 中的奇数行设置一个更具体的 .selectedRow:

.selectedRow,
div.row div.selectedRow:nth-child(odd) {
    background-color: #338FFF;
}

演示 http://jsfiddle.net/jh602sxk/1/