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

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);
});

然后我可以定位期间0，期间-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。