CSS第n個孩子創建序列奇數

Question

我知道有這麼多的問題，但我認爲這是一個關於第n個孩子的新問題。我試圖與訂單

1. 奇數那張左甚至構建多個簡檔頁面進入右
2. 奇數N1 = background1（1）甚至N1 = backround2（1）
3. 奇數N2 = background1（2）甚至n2 = backround2（2）
4. 奇數n3 =背景1（3）偶數n3 =背景2（3）
5. 它簡單地青色洋紅黃色，並且總是重複。 b1cyan左邊，b2magenta右邊，b1黃色左邊，b2cyan右邊，b1magenta左邊，b2黃色右邊等等。

.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)){ 
 
    \t background:cyan; 
 
    \t background-size:100% 100%; 
 
    \t } 
 
    .items:nth-child(even):not(:nth-child(3n+1)){ 
 
    \t background:magenta; 
 
    \t background-size:100% 100%; 
 
    }.items:nth-child(odd):not(:nth-child(3n+2)){ 
 
    \t background:yellow; 
 
    \t background-size:100% 100%; 
 
    \t } 
 
    .items:nth-child(even):not(:nth-child(3n+2)){ 
 
    \t background:cyan; 
 
    \t background-size:100% 100%; 
 
    \t } 
 
    .items:nth-child(odd):not(:nth-child(3n+3)){ 
 
    \t background:magenta; 
 
    \t background-size:100% 100%; 
 
    \t } 
 
    .items:nth-child(even):not(:nth-child(3n+3)){ 
 
    \t background:yellow; 
 
    \t background-size:100% 100%; 
 
    \t }

<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

我相信這是你的願望。

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

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