html - 如何定位类并为每个类设置不同的背景颜色？

Question

<ul>
  <li>XXX</li>
  <li>XXX</li>
  <li class="period">12</li>
  <li class="period">13</li>
  <li class="period">14</li>
  <li class="period">15</li>
  <li class="period">18</li>
  <li class="period">19</li>
  <li class="period">20</li>
  <li class="period">21</li>
 </ul>

如何定位时期类并为每个时期类设置不同的背景颜色？

我不知道如何解决这个问题。

我正在考虑使用nth-of-type但到目前为止还没有运气。

我也试过。第n个孩子。例如：

ul li.period:nth-child(1){
  background: green;
}
ul li.period:nth-child(2){
  background: blue;
}
ul li.period:nth-child(3){
 background: red;
}

但没有运气！

任何线索将不胜感激。

我确实有 jquery 解决方案：

$('.period').each(function (i) {
    $(this).addClass('period-' + i);
});

然后我可以定位 period-0, period-1，但我需要 css 方式。

或另一个jQuery

$( ".period:eq( 0 )" ).css( "opacity", "1" );
$( ".period:eq( 1 )" ).css( "opacity", "0.8" );
$( ".period:eq( 2 )" ).css( "opacity", "0.6" );
$( ".period:eq( 3 )" ).css( "opacity", "0.4" );
$( ".period:eq( 4 )" ).css( "opacity", "0.2" );
$( ".period:eq( 5 )" ).css( "opacity", "0.1" );

但我想要纯CSS。

标签： htmlcsscss-selectors