CSS nth-childがjQueryをオーバーライドしています。ハイライト表示

Question

CSSで設定された行ストライピングのテーブルがあり、jQueryでもクリック機能があります。私のコード：

$(document).on('click', '.datarow', function() { 
    $(".datarow").removeClass("highlight"); 
    $(this).addClass("highlight"); 
    // other code for row select 
}); 

#datatable tr:nth-child(odd) { 
    background-color: #fff; 
    cursor: pointer; 
} 

#datatable tr:nth-child(even) { 
    background-color: #fafafa; 
    cursor: pointer; 
} 

#datatable tr:hover { 
    background-color: #ddd; 
} 

#datatable tr .highlight { 
    background-color: #fbbc05; 
} 

<table id="datatable"> 
<tr class="datarow">...</tr> 
... 
</table> 

jQueryの行のハイライトは動作しません。

しかし、CSSのnth-childコードを削除すると、jQueryが期待通りに機能します。

したがって、CSSのnth-childハイライトはクリックされたときに1つの行を強調表示するjQueryをオーバーライドしています。

どうすれば一緒に働くことができますか？

私の ".highlight"を "#datatable tr .highlight"にしても、まだ運がないので、この回答をhow can I use jquery addClass when selecting a tr to override a nth-child class on a parent div?にしてみました。

Answer 1

どうすれば一緒に作業できますか？

さて、あなたのCSSがそもそも間違っています：

：

#datatable tr .highlight { 
    background-color: #fbbc05; 
} 

はtr内部の要素がhighlightのクラスを持っていますが、あなたが使用する必要がありますので、あなたのjQueryのtrに直接クラスを適用している言います

#datatable tr.highlight { 
    background-color: #fbbc05; 
} 

微妙な違いは、trと.highlightの間の単一のスペースです。

tr .hightlight {} 

私はまた、高度Decoupling Your HTML, CSS, and JavaScriptを読んでお勧めしたい

tr.hightlight {} 

とは非常に異なっています。あなたのCSSはあなたのhtmlに密接に結びついています。