Css nth-childは変わった

Question

私はストライプテーブルを作ろうとしています。私はn番目の子を使用しようとする。しかし、それは本当に奇妙

テンプレートを動作します：

... 
<tr class="striped">...</tr> 
<tr class="more">...</tr> 
... 

CSS：

tr.striped:nth-child(odd) { 
    background-color : rgba($mainColor, .1); 
} 

しかし、ストライプのクラスを持つすべてのTRが着色されました。たぶん私は仕様のいくつかの機能を欠場するでしょうか？

Answer 1

使用この：

tr:nth-child(4n+1) 

の代わり：

tr.striped:nth-child(odd) 

デモ：https://jsfiddle.net/sabeti05/epnjn1wo/