CSS：奇怪，甚至没有开火？

Question

我试图根据他们的赔率和平均值更改页面上元素的背景颜色。

然而，我的CSS根本没有改变背景颜色，我不明白为什么！

这是我的fiddle

这是我的CSS代码：

.miles:nth-child(odd) {
    background-color:#af1f32; 
}

.miles:nth-child(even) {
    background-color:#f7b637;
}

我甚至试过这个但仍然没有工作：

.ite .miles:nth-child(odd) {
    background-color:#af1f32; 
}

.ite .miles:nth-child(even) {
    background-color:#f7b637;
}

我也尝试过这种方式但没有成功：

.miles:nth-of-type(odd) {
    background-color:#af1f32; 
}

.miles:nth-of-type(even) {
    background-color:#f7b637;
}

有人可以就此问题提出建议吗？

提前致谢...

Answer 1

试，

.ite:nth-child(odd) .miles {
    background-color:#af1f32; 
}

.ite:nth-child(even) .miles {
    background-color:#f7b637;
}

Answer 2

您正在定位其父元素为.miles的子元素.ite，这就是为什么偶数和奇数不起作用，因为.miles是.ite的第一个元素，最好在父元素nth-child(even) and (odd)上使用.ite，然后定位inner elements可以是任意内容。

.ite:nth-child(odd) .miles{
    background-color:#af1f32; 
}

.ite:nth-child(even) .miles{
    background-color:#f7b637;
}

<div class="ite" id="" align="center" style="position:relative;width:90%; min-height:70px; margin-top:10px; margin-bottom:20px; background-color:#fff;">
<div class="miles" style="width:20%; height:70px; padding:5px; float:left; color:#fff; font-size:1.3em; position:relative;">
25 miles
</div>

<div style=" width:70%; height:auto; padding:5px; background-color:white; float:left; color:#000; font-size:1.2em; text-align:left;">
some Name
<p style=" width:70%; height:auto; padding:5px; background-color:white; float:left; color:#ccc; font-size:1em; padding:0; margin:0;">
Street Name<br>
City, Zip
</p>

</div>
</div>



<div class="ite" id="" align="center" style="position:relative;width:90%; min-height:70px; margin-top:10px; margin-bottom:20px; background-color:#fff;">
<div class="miles" style="width:20%; height:70px; padding:5px; float:left; color:#fff; font-size:1.3em; position:relative;">
25 miles
</div>

<div style=" width:70%; height:auto; padding:5px; background-color:white; float:left; color:#000; font-size:1.2em; text-align:left;">
some Name
<p style=" width:70%; height:auto; padding:5px; background-color:white; float:left; color:#ccc; font-size:1em; padding:0; margin:0;">
Street Name<br>
City, Zip
</p>

</div>
</div>



<div class="ite" id="" align="center" style="position:relative;width:90%; min-height:70px; margin-top:10px; margin-bottom:20px; background-color:#fff;">
<div class="miles" style="width:20%; height:70px; padding:5px; float:left; color:#fff; font-size:1.3em; position:relative;">
25 miles
</div>

<div style=" width:70%; height:auto; padding:5px; background-color:white; float:left; color:#000; font-size:1.2em; text-align:left;">
some Name
<p style=" width:70%; height:auto; padding:5px; background-color:white; float:left; color:#ccc; font-size:1em; padding:0; margin:0;">
Street Name<br>
City, Zip
</p>

</div>
</div>



<div class="ite" id="" align="center" style="position:relative;width:90%; min-height:70px; margin-top:10px; margin-bottom:20px; background-color:#fff;">
<div class="miles" style="width:20%; height:70px; padding:5px; float:left; color:#fff; font-size:1.3em; position:relative;">
25 miles
</div>

<div style=" width:70%; height:auto; padding:5px; background-color:white; float:left; color:#000; font-size:1.2em; text-align:left;">
some Name
<p style=" width:70%; height:auto; padding:5px; background-color:white; float:left; color:#ccc; font-size:1em; padding:0; margin:0;">
Street Name<br>
City, Zip
</p>

</div>
</div>



<div class="ite" id="" align="center" style="position:relative;width:90%; min-height:70px; margin-top:10px; margin-bottom:20px; background-color:#fff;">
<div class="miles" style="width:20%; height:70px; padding:5px; float:left; color:#fff; font-size:1.3em; position:relative;">
25 miles
</div>

<div style=" width:70%; height:auto; padding:5px; background-color:white; float:left; color:#000; font-size:1.2em; text-align:left;">
some Name
<p style=" width:70%; height:auto; padding:5px; background-color:white; float:left; color:#ccc; font-size:1em; padding:0; margin:0;">
Street Name<br>
City, Zip
</p>

</div>
</div>


<div class="ite" id="" align="center" style="position:relative;width:90%; min-height:70px; margin-top:10px; margin-bottom:20px; background-color:#fff;">
<div class="miles" style="width:20%; height:70px; padding:5px; float:left; color:#fff; font-size:1.3em; position:relative;">
25 miles
</div>

<div style=" width:70%; height:auto; padding:5px; background-color:white; float:left; color:#000; font-size:1.2em; text-align:left;">
some Name
<p style=" width:70%; height:auto; padding:5px; background-color:white; float:left; color:#ccc; font-size:1em; padding:0; margin:0;">
Street Name<br>
City, Zip
</p>

</div>
</div>

Answer 3

你正在将奇数和偶数应用于.miles类但事情是.ite类只包含一个.miles类，这就是为什么它只显示奇怪的背景颜色。 这是样本。 谢谢。

＆＃13;

＆＃13;

.ite:nth-child(odd) .miles{
    background-color:#af1f32; 
}

.ite:nth-child(even) .miles {
    background-color:#f7b637;
}

＆＃13;

<div class="ite" id="" align="center" style="position:relative;width:90%; min-height:70px; margin-top:10px; margin-bottom:20px; background-color:#fff;">
<div class="miles" style="width:20%; height:70px; padding:5px; float:left; color:#fff; font-size:1.3em; position:relative;">
25 miles
</div>

<div style=" width:70%; height:auto; padding:5px; background-color:white; float:left; color:#000; font-size:1.2em; text-align:left;">
some Name
<p style=" width:70%; height:auto; padding:5px; background-color:white; float:left; color:#ccc; font-size:1em; padding:0; margin:0;">
Street Name<br>
City, Zip
</p>

</div>
</div>



<div class="ite" id="" align="center" style="position:relative;width:90%; min-height:70px; margin-top:10px; margin-bottom:20px; background-color:#fff;">
<div class="miles" style="width:20%; height:70px; padding:5px; float:left; color:#fff; font-size:1.3em; position:relative;">
25 miles
</div>

<div style=" width:70%; height:auto; padding:5px; background-color:white; float:left; color:#000; font-size:1.2em; text-align:left;">
some Name
<p style=" width:70%; height:auto; padding:5px; background-color:white; float:left; color:#ccc; font-size:1em; padding:0; margin:0;">
Street Name<br>
City, Zip
</p>

</div>
</div>



<div class="ite" id="" align="center" style="position:relative;width:90%; min-height:70px; margin-top:10px; margin-bottom:20px; background-color:#fff;">
<div class="miles" style="width:20%; height:70px; padding:5px; float:left; color:#fff; font-size:1.3em; position:relative;">
25 miles
</div>

<div style=" width:70%; height:auto; padding:5px; background-color:white; float:left; color:#000; font-size:1.2em; text-align:left;">
some Name
<p style=" width:70%; height:auto; padding:5px; background-color:white; float:left; color:#ccc; font-size:1em; padding:0; margin:0;">
Street Name<br>
City, Zip
</p>

</div>
</div>



<div class="ite" id="" align="center" style="position:relative;width:90%; min-height:70px; margin-top:10px; margin-bottom:20px; background-color:#fff;">
<div class="miles" style="width:20%; height:70px; padding:5px; float:left; color:#fff; font-size:1.3em; position:relative;">
25 miles
</div>

<div style=" width:70%; height:auto; padding:5px; background-color:white; float:left; color:#000; font-size:1.2em; text-align:left;">
some Name
<p style=" width:70%; height:auto; padding:5px; background-color:white; float:left; color:#ccc; font-size:1em; padding:0; margin:0;">
Street Name<br>
City, Zip
</p>

</div>
</div>



<div class="ite" id="" align="center" style="position:relative;width:90%; min-height:70px; margin-top:10px; margin-bottom:20px; background-color:#fff;">
<div class="miles" style="width:20%; height:70px; padding:5px; float:left; color:#fff; font-size:1.3em; position:relative;">
25 miles
</div>

<div style=" width:70%; height:auto; padding:5px; background-color:white; float:left; color:#000; font-size:1.2em; text-align:left;">
some Name
<p style=" width:70%; height:auto; padding:5px; background-color:white; float:left; color:#ccc; font-size:1em; padding:0; margin:0;">
Street Name<br>
City, Zip
</p>

</div>
</div>


<div class="ite" id="" align="center" style="position:relative;width:90%; min-height:70px; margin-top:10px; margin-bottom:20px; background-color:#fff;">
<div class="miles" style="width:20%; height:70px; padding:5px; float:left; color:#fff; font-size:1.3em; position:relative;">
25 miles
</div>

<div style=" width:70%; height:auto; padding:5px; background-color:white; float:left; color:#000; font-size:1.2em; text-align:left;">
some Name
<p style=" width:70%; height:auto; padding:5px; background-color:white; float:left; color:#ccc; font-size:1em; padding:0; margin:0;">
Street Name<br>
City, Zip
</p>

</div>
</div>

＆＃13;

＆＃13;

＆＃13;