CSS - 如何爲奇數和偶數的顏色着色？

我想用CSS來實現下面的效果，而不用像這樣硬編碼。CSS - 如何爲奇數和偶數的顏色着色？

<body> 
    <div class="activeContent"> 
     <div class="content"> 
      <div class="colour-blue"> 
       odd div 
      </div> 
     </div> 
     <div class="content"> 
      <div class="colour-light-blue"> 
       even div 
      </div> 
     </div> 
    </div> 
</body>

如何使用純粹的CSS做到這一點？

來源

2017-09-27 user3635998

請標明的答案是正確的，如果它幫助你.. –

你可以做這樣的事情：

.content:nth-child(odd)>div { 
 
    background: blue; 
 
} 
 

 
.content:nth-child(even)>div { 
 
    background: red; 
 
} 
 

 
.content { 
 
    width: 200px; 
 
    height: 200px; 
 
}

<div class="activeContent"> 
 
    <div class="content"> 
 
    <div class="colour-blue"> 
 
     stuff 
 
    </div> 
 
    </div> 
 

 
    <div class="content"> 
 
    <div class="colour-light-blue"> 
 
     some more stuff 
 
    </div> 
 
    </div> 
 
</div>

這會工作得很好，我認爲。

來源

2017-09-27 21:35:17

好，但我會在'>'選擇可能添加到它。即'.content：nth-child（odd）> div'，所以你只需着色直接的子div。 – zgood

你可以試試這個：

.activeContent div.content:nth-child(2n) { 
 
    color: #00ff00; 
 
} 
 

 
.activeContent div.content:nth-child(2n+1) { 
 
    color: #0000ff; 
 
}

<div class="activeContent"> 
 
    <div class="content"> 
 
    stuff 
 
    </div> 
 

 
    <div class="content"> 
 
    some more stuff 
 
    </div> 
 
    
 
    <div class="content"> 
 
    more and more stuff 
 
    </div> 
 
    
 
    <div class="content"> 
 
    one more stuff 
 
    </div> 
 
</div>

來源

2017-09-27 21:36:42

我想他想要嵌套'.content'內的'div'（參見他的「硬編碼」class =「color-blue」和「class =」color-light-blue「'），而不是'.content' div本身。 – zgood

是的，但我們希望避免使用這些類來製作顏色，所以使用此解決方案時，它們將毫無用處，並且他可以直接在選擇器中添加CSS代碼 –

CSS - 如何爲奇數和偶數的顏色着色？

回答

相關問題