Почему Nth-Child (даже) может быть не отвечает, но (странно) работает нормально? [дублировать] ⇐ CSS

[Anonymous]

Предварительное покрытие, которое я все еще являюсь новичком в кодировании как с CSS, так и с HTML. Я пытаюсь создать своего рода временную шкалу с двумя столбцами, слева и справа от средней дорожки и с каждой чередующейся столбцами временной шкалы (для сохранения места). До сих пор все работало, но я пытался реализовать ящик «заметки», которая выходит в сторону каждой записи для получения более подробной информации о записи. Поскольку каждая запись временной шкалы чередуются «столбцы» на временной шкале, эти коробки также должны: для записей левша я хочу, чтобы ноты плавали слева от коробки, и для вооруженных записей я хочу, чтобы ноты плавали Право коробки. Я пытался использовать div: nth-child (ODD) и div: nth-child (даже) , чтобы это произошло, потому что я использовал div: nth-child (даже) Чтобы создать чередующиеся эффекты каждой записи, и это работало отлично. Тем не менее, код, по -видимому, только распознает и реализует стиль (ODD) правил и игнорирует (даже) вообще. Я думал, что это может иметь какое -то отношение к позиционированию (обычно это происходит, когда у меня возникают проблемы, подобные этой), но я попробовал что -то столь же простое, как изменение цвета (даже) , и это тоже было проигнорировано . < /p>
Вот CSS: < /p>

Код: Выделить всё

.notes {
width: 55px;
height: 1.5em;
overflow: hidden;
color: #fff000;
z-index: 1;
transition: 0.4s ease;
position: absolute;
}
.notes:hover {
height: auto;
max-height: 150px;
width: 350px;
overflow: auto;
padding: 10px;
}
.notes:nth-child(odd) {
right: calc(100% + 30px);
}
.notes:nth-child(even) {
color: #000fff;
left: calc(100% + 30px);
}
< /code>
А вот пример из HTML: < /p>


Insert Notes Here 1
Title1
Subtitle 1



Insert Notes Here 2
Title 2
Subtitle 2

Как видите, .notes div встроен в Div .en , так что это может вызвать проблему; Тем не менее, я изо всех сил пытаюсь понять, почему (ODD) параметры реализуются, в то время как (даже) параметры игнорируются. Любой совет по этому вопросу будет оценен!


Подробнее здесь: https://stackoverflow.com/questions/794 ... works-fine