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 ...查看代码并使用nth-child（2n）或使用nth-child（偶数）两者都能正常工作

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

使每一秒div都有不同的背景颜色

2 个答案: