：nth-​​of-type不针对所需元素

Question

我正在构建一个日历，其中.cal-contents容器中有几个子节点。像这样：

<div class="cal-contents">
    <div class="single-day"></div>
    <div class="tooltip"></div>
    <div class="single-day"></div>
    <div class="tooltip"></div>
</div>

在这种情况下.single-day和.tooltip互相跟随，我正在尝试定位每个第n个.single-day元素并在其后设置工具提示：

.cal-contents .single-day:nth-of-type(1) + .tooltip {
   color: red;
}
.cal-contents .single-day:nth-of-type(2) + .tooltip {
   color: red;
}

在我正在制作的案例中，该类只有4个元素：“单日”和4个“工具提示”。尝试在codepen中玩一下，看看我是否可以获得结果，但是浏览器没有通过1,2,3或4号正确选择它们。

Codepen：http://codepen.io/Malachute/pen/dXOPyj?editors=1100