Question

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

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

为什么nth-type的行为像nth-child？

1 个答案: