使每秒第二個不同的背景顏色

Question

我使用CSS給每個第二個div不同的背景顏色，但不知何故，當使用（奇數）和無人使用（偶數）時，我會得到兩個，這是怎麼回事？

.hoverDiv:nth-child(odd) { 
    background: red; 
} 
.hoverDiv:hover { 
    background: #696969; 
    cursor: pointer; 
} 

<div class="modal-body"> 
    <div> 
      <div class="hoverDiv"> 
       <h2>Number 1</h2> 
      </div> 
     </div> 
     <div> 
      <div class="hoverDiv"> 
       <h2>Number 2</h2> 
      </div> 
    </div> 
</div> 

http://jsfiddle.net/j9S8v/87/

Answer 1

這是因爲你的嵌套是從你的CSS選擇器不同。 在你的html中，hoverDiv沒有任何（元素）兄弟姐妹。

.hoverDiv:nth-child(odd) { 
     background: red; 
} 
.hoverDiv:hover { 
    background: #696969; 
    cursor: pointer; 
} 

<div class="modal-body"> 
    <div class="hoverDiv"> 
     <h2>Number 1</h2> 
    </div> 
    <div class="hoverDiv"> 
     <h2>Number 2</h2> 
    </div> 
</div> 

Answer 2

你剛纔刪除的外層div ...查看代碼並使用第n個孩子（2N），或使用第n個孩子（甚至）都將正常工作

.hoverDiv:nth-child(2n) { 
 
    background: red; 
 
} 
 
.hoverDiv:hover { 
 
    background: #696969; 
 
    cursor: pointer; 
 
    }

<div class="modal-body"> 
 
     <div class="hoverDiv"> 
 
      <h2>Number 1</h2> 
 
     </div> 
 
     <div class="hoverDiv"> 
 
      <h2>Number 2</h2> 
 
     </div> 
 
</div>