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。

Answer 2

您的CSS定位于<h3>元素中的奇数/偶数.col-venue标记，我在您的标记中没有看到。即使你的标记中有.col-venue，它也只会针对其中的H3s - example here。

您需要在标记中从更高级别控制样式，请参阅下文。

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

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

http://jsfiddle.net/Lvezzrnq/

使用上面的CSS选择器，您可以定位奇数和偶数.row-venue元素，然后向下钻取到h3。

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

2 个答案: