第n个奇数/偶数子元素h3 [英] nth odd/even child elements h3

问题描述

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

I have a html page setup like so

<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都是不同的颜色。我尝试过下面的代码

All I want to do is make every odd h3 a different colour to every even. I have tried with the code below

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

我似乎没有得到我的头，任何帮助将不胜感激

I just cant seem to get my head around it, any help would be appreciated

推荐答案

< h3> c $ c>< div class =col-sm-12> 。因为计数是零base-first child = even，所以您定义的偶数规则适用于所有< h3> 元素。

<h3> is always the first child of <div class="col-sm-12">. Because the counting is zero base - first child = even, so the even rule that you defined applies to all <h3> elements.

为了得到你的要求，你需要找到< div class =row row-venue> 项目之间的第n个孩子： / p>

To get what you ask, you need to find the nth child between the <div class="row row-venue"> items:

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

如果您的div与其他元素混合使用，请使用 ：nth-​​of-type 而不是：nth-​​child 。

If your divs are mixed with other elements, use :nth-of-type instead of :nth-child.

这篇关于第n个奇数/偶数子元素h3的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！