nth-child（odd）和nth-child（even）选择器按不同类的行为

Question

我有由nth-child(odd)和nth-child(even)选择器分隔的具有不同背景颜色的元素

<!-- <div class="s">s</div> -->
<div class="r">r</div>
<div class="r">r</div>
<div class="r">r</div>
<div class="r">r</div>
<div class="r">r</div>

CSS：

.s {
  background: #FFF;
}
.r:nth-child(odd) {
    background: #e3e5e5;
}
.r:nth-child(even) {
    background: #FFF;
}

按预期，第一个元素具有灰色背景。

然后取消注释具有不同.s类的第一行HTML，这将更改.r类元素的行为，因为第一个.r类元素现在具有白色背景。

https://jsfiddle.net/pu5yzgf7/1/

为什么？我想念的是什么？