CSS: четное и нечетное не срабатывает?

ProgramBox

CSS: четное и нечетное не срабатывает?

Post author:admin
Запись опубликована:10 февраля, 2023
Post category:Вопросы по программированию

#css

Вопрос:

Я пытаюсь изменить цвет фона элементов на моей странице на основе их коэффициентов и четности.

Однако мой CSS вообще не меняет цвет фона, и я не понимаю почему!

Это моя скрипка

И это мой 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;
}

Может кто-нибудь посоветовать по этому вопросу?

Заранее спасибо…

1. Они должны быть последовательными. Итак, вам нужно сделать что-то вроде .ite:nth-child(odd) .miles

2. Пожалуйста, укажите минимальное подмножество вашего HTML непосредственно в вопросе. Очевидно, вы знаете, что .foo:nth-child(even) это означает «a .foo , который также является дочерним элементом с четным номером», верно?

3. Попробуйте прочитать ваш селектор как английский и посмотреть, имеет ли это смысл. Например .miles:nth-child(odd) , английский — an element which has class .miles`, и является нечетным дочерним элементом его (непосредственного) родителя «. Это то, чего ты хочешь?

Ответ №1:

попробуйте,

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

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

Ответ №2:

Ну, вы нацелены на дочерний элемент .miles , родительским элементом которого является .ite , поэтому четное и нечетное не будут работать как .miles первый элемент .ite , поэтому лучше использовать nth-child(even) and (odd) родительский элемент .ite , а затем target 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>

Ответ №3:

вы применяете нечетное и четное к классу .miles, но дело в том, что класс .ite содержит только один класс .miles, поэтому он показывал только нечетный цвет фона. вот пример. Спасибо.

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

Вопрос:

Комментарии:

Ответ №1:

Ответ №2:

Ответ №3:

Вам также может понравиться

как я могу импортировать документацию в новый проект, ссылающийся на dll?

Как я могу найти определитель Вронского с помощью numpy

Группы API каталогов Google