css - 奇怪甚至不能在 css 中工作

Question

.timeline-centered .timeline-entry .timeline-entry-inner .timeline-icon:nth-of-type(odd) {
  background-color: #fad839;
}
.timeline-centered .timeline-entry .timeline-entry-inner .timeline-icon:nth-of-type(even) {
  background-color: #21a9e1;
}

<div class="timeline-centered" id="ulnotifications">
  <article class="timeline-entry">
    <div class="timeline-entry-inner">
      <div class="timeline-icon"></div>
      <div class="timeline-label">
        <h2><a href="#" id="anoti" notiid="162d3607-a71e-1803-228d-5434df80a346" style="text-decoration: none; color:#fff" class="ui-link">Gaurav Bansal  joined this life group.</a></h2>
      </div>
    </div>
  </article>
  <article class="timeline-entry">
    <div class="timeline-entry-inner">
      <div class="timeline-icon"></div>
      <div class="timeline-label">
        <h2><a href="#" id="anoti" notiid="6cef2b1b-b478-6a08-7488-5433dd7399b8" style="text-decoration: none; color:#fff" class="ui-link">Aravind M  joined this life group.</a></h2>
      </div>
    </div>
  </article>
  <article class="timeline-entry">
    <div class="timeline-entry-inner">
      <div class="timeline-icon"></div>
      <div class="timeline-label">
        <h2><a href="#" id="anoti" notiid="b23190cc-af8a-1c10-bf76-5433be250268" style="text-decoration: none; color:#fff" class="ui-link">Elca bs  joined this life group.</a></h2>
      </div>
    </div>
  </article>
  <article class="timeline-entry">
    <div class="timeline-entry-inner">
      <div class="timeline-icon"></div>
      <div class="timeline-label">
        <h2><a href="#" id="anoti" notiid="d8c28074-aedf-da68-624d-5433b19801ae" style="text-decoration: none; color:#fff" class="ui-link">Vin Katyal  joined this life group.</a></h2>
      </div>
    </div>
  </article>
  <article class="timeline-entry">
    <div class="timeline-entry-inner">
      <div class="timeline-icon"></div>
      <div class="timeline-label">
        <h2><a href="#" id="anoti" notiid="54f80046-cc56-1838-0483-543386f544c7" style="text-decoration: none; color:#fff" class="ui-link">Vin Katyal  joined this life group.</a></h2>
      </div>
    </div>
  </article>
  <article class="timeline-entry">
    <div class="timeline-entry-inner">
      <div class="timeline-icon"></div>
      <div class="timeline-label">
        <h2><a href="#" id="anoti" notiid="d387b5e0-12bf-05c8-d9f1-54338337e970" style="text-decoration: none; color:#fff" class="ui-link">Vin Katyal  joined this life group.</a></h2>
      </div>
    </div>
  </article>
  <article class="timeline-entry">
    <div class="timeline-entry-inner">
      <div class="timeline-icon"></div>
      <div class="timeline-label">
        <h2><a href="#" id="anoti" notiid="e36357e7-c6b4-49ec-d4cf-542cf4af3d81" style="text-decoration: none; color:#fff" class="ui-link">Catherine Rodrigues added you as their wife</a></h2>
      </div>
    </div>
  </article>
  <article class="timeline-entry">
    <div class="timeline-entry-inner">
      <div class="timeline-icon"></div>
      <div class="timeline-label">
        <h2><a href="#" id="anoti" notiid="ea9fd63b-863d-6fc1-c98e-542bbdacaff4" style="text-decoration: none; color:#fff" class="ui-link">gh</a></h2>
      </div>
    </div>
  </article>
  <article class="timeline-entry">
    <div class="timeline-entry-inner">
      <div class="timeline-icon"></div>
      <div class="timeline-label">
        <h2><a href="#" id="anoti" notiid="62e00001-cc6d-3e3b-397b-542b9733b5ed" style="text-decoration: none; color:#fff" class="ui-link">g</a></h2>
      </div>
    </div>
  </article>
  <article class="timeline-entry">
    <div class="timeline-entry-inner">
      <div class="timeline-icon"></div>
      <div class="timeline-label">
        <h2><a href="#" id="anoti" notiid="b78ba209-aede-34b9-317b-542b80a3ef44" style="text-decoration: none; color:#fff" class="ui-link">jasdjasd</a></h2>
      </div>
    </div>
  </article>
</div>

它只显示奇数场的黄色而不是偶数场。

请帮忙

Answer 1

您正在选择偶数和奇数 .timeline-icon 元素。但是每个条目只有一个图标，所以每个图标的索引都是 1，它们都会被认为是奇数。

我建议改为选择偶数和奇数 .timeline-entry 元素中的图标，如下所示:

.timeline-centered .timeline-entry:nth-of-type(odd) .timeline-entry-inner .timeline-icon {
    background-color: #fad839;
}
.timeline-centered .timeline-entry:nth-of-type(even) .timeline-entry-inner .timeline-icon {
    background-color: #21a9e1;
}

WORKING EXAMPLE

编辑:

应用于您发布的 fiddle ，它 looks like THIS .