需要解释为什么nth：孩子不能正常工作

Question

HTML：

<div class="mydiv">1</div>
<h5>x</h5>
<div class="mydiv">2</div>
<div class="mydiv">3</div>

CSS：

.mydiv:nth-child(3) {color:red;}

结果：

https://jsfiddle.net/t4shhfwb/

我希望第3个div（数字3）为红色，为什么h5元素干扰了指定类的位置（mydiv）？

谢谢！