html - 使每个第二个 div 不同的背景颜色

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 没有任何(元素) sibling 。

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