Html 第n个奇偶子元素h3

我有一个像这样的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:nth-of-type(odd){
  color:white;
}

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

我只是想不通，任何帮助都会很感激的

总是

的第一个孩子。因为计数是零基-first child=偶数，所以您定义的偶数规则适用于所有

元素

要获得所需内容，您需要在

项之间找到第n个子项：

。世界其他地区地点：第n个孩子（奇数）h3{
颜色：白色；
}
.世界其他地区地点：第n名儿童（偶数）h3{
颜色：黑色；
}

---

如果您的div与其他元素混合，请使用

:nth of type

而不是

:nth child

您的CSS针对的是

.col

元素中的奇数/偶数

标记，我在您的标记中没有看到这些标记。即使

.col

在您的标记中，它也只针对其中的H3-

您需要从标记的更高级别控制样式，请参见下文

场地1
场地2

。世界其他地区地点：第n个类型（奇数）h3{
颜色：红色；
}
.世界其他地区地点：h3型第n个（偶数）{
颜色：黑色；
}

---

使用上述CSS选择器，您将目标锁定为奇数和偶数

。行地点

元素，然后向下钻取到h3。

OP使用的是

：n类型

非

：n子项

，不确定澄清的目的。你是不是无意中把这两个都弄错了？他说他“甚至只是尝试了”：N的类型作为一个可能的解决方案。谢谢，它现在很有意义，以前从未使用过，只是使用硬编码，这将节省我很多时间。感激

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

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