CSS нечетный и даже ставит один и тот же цвет рядом

Question

CSS нечетный и даже ставит один и тот же цвет рядом

0

Я не хочу, чтобы тот же цвет был бок о бок. В данный момент: 1-2-1-1-2, но должно быть: 1-2-1-2-1

HTML

<ul class="list list-unstyled">
  <li>The_hangover_part_1.avi<span class="pull-right">25Gb</span></li>
  <li>The_hangover_part_1_intro.avi<span class="pull-right">15Gb</span></li>
  <li>Covers<span class="pull-right">255Kb</span></li>
  <ul>
    <li>the_hangover_part_1_cover_1.jpg<span class="pull-right">123Kb</span></li>
    <li>the_hangover_part_1_cover_2.jpg<span class="pull-right">122Kb</span></li>
    <li>the_hangover_part_1_cover_2.jpg<span class="pull-right">122Kb</span></li>
  </ul>
</ul>

CSS

.list li:nth-child(even) {
  background: transparent;
}
.list li:nth-child(odd) {
  background-color: rgba(255,255,255,0.05);
}

Ilya Streltsyn 22 март 2014, в 23:12

Источник

Теги:

html

css

2 ответа

Ещё вопросы

Ilya Streltsyn · Answer 1 · 2014-03-22T21-10-00.000Z

Во-первых, вам нужно исправить свой HTML. ul элемент не может быть вложенными непосредственно в другом ul, он должен быть внутри одного из li с:

<ul class="list list-unstyled">
  <li>The_hangover_part_1.avi<span class="pull-right">25Gb</span></li>
  <li>The_hangover_part_1_intro.avi<span class="pull-right">15Gb</span></li>
  <li>Covers<span class="pull-right">255Kb</span>
    <ul>
      <li>the_hangover_part_1_cover_1.jpg<span class="pull-right">123Kb</span></li>
      <li>the_hangover_part_1_cover_2.jpg<span class="pull-right">122Kb</span></li>
      <li>the_hangover_part_1_cover_2.jpg<span class="pull-right">122Kb</span></li>
    </ul>
  </li>
</ul>

Затем, когда вы получите правильную разметку, вы можете переопределить порядок цветов для подпунктов нечетных элементов основного списка:

.list li:nth-child(odd) li:nth-child(odd) {
  background: transparent;
}
.list li:nth-child(odd) li:nth-child(even) {
  background-color: rgba(255,255,255,0.05);
}

tvkanters · Answer 2 · 2014-03-22T20-12-00.000Z

Это происходит потому, что селектор :nth-child смотрит только на позицию внутри своего прямого родителя. Чтобы исправить это, вы можете удалить теги li за пределами их ul и отступать, предоставив им класс, который содержит стиль отступа.

Тем, кто отрицал этот ответ, пожалуйста, прокомментируйте, чтобы объяснить причину.