Элементы списка разными цветами с помощью :nth-child()

Ребята, я новичок и пытаюсь изучать css. Сейчас изучаю селектор nth-child. У меня есть список, где первым идет красный цвет, вторым - желтый, а третьим зеленый. Хочу сделать так, чтобы при добавлении новых элементов они также становились цветными в заданной последовательности.

li:nth-child(1n) { 
  background-color: red; 
} 
 
li:nth-child(2n) { 
  background-color: yellow; 
} 
 
li:nth-child(3n) { 
  background-color: green; 
}

<ul> 
  <li>Красный</li> 
  <li>Желтый</li> 
  <li>Зеленый</li> 
  <li>Новый цвет</li> 
</ul>

Но когда я к этим трем добавляю четвертую лишку, то она становится не красной, а желтой. И в инспекторе браузера почему то красный цвет зачеркнут. Почему так?