第n个奇数/偶数子元素h3

Question

我有一个像这样的html页面设置

<div class="row row-venue">
    <div class="col-sm-12">
        <h3>Venue 1</h3>
    </div>
</div>
<div class="row row-venue">
    <div class="col-sm-12">
        <h3>Venue 2</h3>
    </div>
</div>

我想要做的就是让每个奇数的h3与每个偶数颜色不同.我试过下面的代码

div.row-venue div.col-venue h3:nth-of-type(odd){
  color:white;
}
div.row-venue div.col-venue h3:nth-of-type(even){
  color:black;
}

甚至只是尝试过

h3:nth-of-type(odd){
  color:white;
}

h3:nth-of-type(even){
  color:black;
}

我似乎无法理解它,任何帮助将不胜感激

Answer 1

<h3>永远是第一个孩子<div class="col-sm-12">.因为计数是零基础 - 第一个子=偶数,所以您定义的偶数规则适用于所有<h3>元素.

为了得到你所要求的,你需要在<div class="row row-venue">项目之间找到第n个孩子:

.row-venue:nth-child(odd) h3 {
    color: white;
}
.row-venue:nth-child(even) h3 {
    color: black;
}

如果您的div与其他元素混合使用,请使用:nth-of-type而不是:nth-child.