为什么nth类型行为像第n个孩子？

Question

我试图替换某个类的元素的颜色，并忽略它们之间不同类的任何元素。 nth-of-type应提供此功能，但在Firefox和Chrome中，它的行为不正确。

http://jsfiddle.net/rbe5oz52/

<div class="parent"> 
    <div class="section">Section</div> 
    <div class="section">Section</div> 
    <div class="ignoreMe">IgnoreMe</div> 
    <div class="section">Section</div> 
    <div class="section">Section</div> 
</div> 

.parent .section 
{ 
    background-color: yellow; 
} 

.parent .section:nth-of-type(2n+1) 
{ 
    background-color: red; 
} 

它应该显示的部分为红色，黄色，红色，黄色，但ignoreMe元素抛出这一关，并导致两个黄色成一排。

的定义说，这应该工作的方式我想： https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-of-type

这是一个更加灵活和实用的伪选择，如果你想，以确保您无论身在何处选择同一类型的标签的它在父元素内部，或者其他不同的标签出现在它之前。

我该如何解决这个问题？

Answer 1

.parent .section 
{ 
    background-color: red; 
} 

.parent .section:nth-of-type(2n+1) 
{ 
    background-color: yellow; 
} 

http://jsfiddle.net/shellyjindal/hL97tn2x/5/