Question

我有一个n-child问题。例如，我有一组div，我使用nth-child（奇数）来定位奇数元素来做一些东西，如下例所示 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

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

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

Answer 2

试试这个。

.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;
}

在div之间停止打破第n个子序列

2 个答案: