阻止介于两者之间的 div 中断第 n 个子序列

Question

我有一个第n个孩子的问题。例如，我有一组div，我在其中使用 nth-child（odd） 来定位奇数元素来做一些事情，如以下示例所示http://codepen.io/hellouniverse/pen/apvWpE

现在，它一直工作到中间有一个div打破了整个序列，就像在类旅行者中看到的那样。

如何保持序列？

用于演示的 html 是

<div class="wrapper">
    <div class="test">Hello World</div>
    <div class="test2">Hello Earth</div>

    <div class="test">Hello World</div>
    <div class="test2">Hello Earth</div>

    <div class="test">Hello World</div>
    <div class="test2">Hello Earth</div>

    <div class="test">Hello World</div>
    <div class="test2">Hello Earth</div>
    <div class="voyager"> I AM GOING TO BREAK UYOU </div>

    <div class="test">Hello World</div>
    <div class="test2">Hello Earth</div>

    <div class="test">Hello World</div>
    <div class="test2">Hello Earth</div>

    <div class="test">Hello World</div>
    <div class="test2">Hello Earth</div>

    <div class="test">Hello World</div>
    <div class="test2">Hello Earth</div>

</div>

用于演示的 css 是

.wrapper {
    width: 100%;
    .test {
        color: red;
        float: left;
        width: 50%;
        height: 20px;
    }
    .test2 {
        color: blue;
        float: left;
        width: 50%;
        height: 20px;
    }
    div:nth-child(odd) {
        color: grey;
    }
}

Answer 1

试试这个。

.wrapper {
    width: 100%;
}
.test {
    color: red;
    float: left;
    width: 50%;
    height: 20px;
}
.test2 {
    color: blue;
    float: left;
    width: 50%;
    height: 20px;
}
div:nth-child(odd) {
    color: grey;
}
div.voyager ~ div:nth-child(even){
    color: grey;
}
div.voyager ~ div:nth-child(odd){
    color: blue;
}

Answer 2

'nth-' 选择器只计算元素，不考虑类。不幸的是，没有"nth-of-class（）"...

我看到的唯一方法是将您的"voyager"类元素更改为其他类型，例如span