html - Css nth-child 工作很奇怪

Question

我试着做一个条纹表。但是当我尝试使用第 nth-child 时，它的工作方式真的很奇怪

模板:

...
<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/