用于不同颜色的 CSS 选择器 nth-child()答案

【问题标题】：CSS Selector nth-child() for different colors用于不同颜色的 CSS 选择器 nth-child()
【发布时间】：2014-07-27 03:17:00
【问题描述】：

我有一个带有 5 个子 DIV 的父 DIV，每个子 DIV 都有相同的类，这似乎是问题所在。我想为每个子 DIV 设置不同的背景颜色？但是 CSS 似乎出了点问题。想法？

CSS

   .rsThumbsContainer:nth-child(2){
        background: rgb(184,84,84);
    }

HTML

<div class="rsThumbsContainer">
 <div class="rsNavItem rsThumb">
    <div class="rsTmb">Frugobee video</div>
 </div>
 <div class="rsNavItem rsThumb">
   <div class="rsTmb">Post a job</div>
 </div>
 <div class="rsNavItem rsThumb">
  <div class="rsTmb">Get a quote</div>
 </div>
 <div class="rsNavItem rsThumb">
  <div class="rsTmb">Make a hire</div>
 </div>
 <div class="rsNavItem rsThumb">
  <div class="rsTmb">Pay with ease</div>
 </div>
</div>

输出：

我知道可以使用 ID 和 JQuery 来完成。

【问题讨论】：

你为什么把它弄得这么复杂？ :o
我什至看不懂这个 CSS。
出了什么问题？没有背景色吗？
我已经编辑了帖子，谢谢！

标签： html css

【解决方案1】：

参见示例。您需要在

上设置 :nth-child

<div class="rsNavItem rsThumb">

JSFIDDLE DEMO

【讨论】：

【解决方案2】：

您需要将nth-child 应用于子选择器，而不是父选择器：

.rsNavItem:nth-child(2) { 
  background: rgb(184,84,84); 
}

【讨论】：

另外，如果你想对每个偶数的孩子重复，你需要用“2n”替换“2”，或者为奇数的孩子“2n+1”