CSS nth-child创建序列奇数偶数

Question

我知道有很多这方面的问题，但我认为这是一个关于第n个孩子的新问题。我试图用订单构建多个个人资料页面

1. 奇怪的左边甚至是正确的
2. 奇数n1 = background1（1）偶数n1 = backround2（1）
3. 奇数n2 = background1（2）偶数n2 = backround2（2）
4. 奇数n3 = background1（3）偶数n3 = backround2（3）
5. 它只是青色洋红色黄色并且总是重复。 b1cyan离开，b2magenta右，b1yellow左，b2cyan右，b1magenta左，b2yellow右等等。

.wrapper{
    width:50%;
    position:relative;
    margin:0 auto;}

    .items{
    width:100%;}

    .items:nth-child(odd){
    text-align:left;}
    .items:nth-child(even){
    text-align:right;}

    .items:nth-child(odd):not(:nth-child(3n+1)){
    	background:cyan;
    	background-size:100% 100%;
    	}
    .items:nth-child(even):not(:nth-child(3n+1)){
    	background:magenta;
    	background-size:100% 100%;
    }.items:nth-child(odd):not(:nth-child(3n+2)){
    	background:yellow;
    	background-size:100% 100%;
    	}
    .items:nth-child(even):not(:nth-child(3n+2)){
    	background:cyan;
    	background-size:100% 100%;
    	}
    .items:nth-child(odd):not(:nth-child(3n+3)){
    	background:magenta;
    	background-size:100% 100%;
    	}
    .items:nth-child(even):not(:nth-child(3n+3)){
    	background:yellow;
    	background-size:100% 100%;
    	}

<div class="wrapper">
        <div class="items">a</div>
        <div class="items">b</div>
        <div class="items">c</div>
        <div class="items">d</div>
        <div class="items">e</div>
        <div class="items">f</div>
        <div class="items">g</div>
        <div class="items">h</div>
        <div class="items">i</div>
        <div>

似乎.items:nth-child(odd):not(:nth-child(3n+1))表示

订单中的奇数（3x0）+1项应该这样做，等等。它没有像我一样工作。

请帮助

Answer 1

我相信这就是你想要的。

＆＃13;

＆＃13;

.wrapper{
    width:50%;
    position:relative;
    margin:0 auto;}

    .items{
    width:100%;}

    .items:nth-child(odd){
    text-align:left;}
    .items:nth-child(even){
    text-align:right;}

    .items:nth-child(odd):nth-child(3n+1) {
      background: cyan;
    }
    .items:nth-child(even):nth-child(3n+2) {
      background: magenta;
    }
    .items:nth-child(odd):nth-child(3n+3) {
      background: yellow;
    }

    .items:nth-child(even):nth-child(3n+4) {
      background: cyan;
    }
    .items:nth-child(odd):nth-child(3n+5) {
      background: magenta;
    }
    .items:nth-child(even):nth-child(3n+6) {
      background: yellow;
    }

＆＃13;

<div class="wrapper">
        <div class="items">a</div>
        <div class="items">b</div>
        <div class="items">c</div>
        <div class="items">d</div>
        <div class="items">e</div>
        <div class="items">f</div>
        <div class="items">g</div>
        <div class="items">h</div>
        <div class="items">i</div>
        <div>

＆＃13;

＆＃13;

＆＃13;