Наложение стилей в css друг на друга

Обнаружил любопытную проблемку, которую не могу решить (или потрачу слишком много времени), ввиду чего обращаюсь за советом.

Суть проблемы: существует исходник, по которому надо скопировать группу вложенных списков без использования классов, дав им различные css-свойства.

Разметка:

<div>
  <ul>
    <li><a href="123">1</a>
      <ul>
        <li><a href="123">1</a>
          <ul>
            <li><a href="123">4</a>
              <ol>
                <li><a href="123">a</a></li>
                <li><a href="123">s</a></li>
                <li><a href="123">d</a></li>
                <li><a href="123">b</a></li>
                <li><a href="123">g</a></li>
                <li><a href="123">d</a></li>
              </ol>
            </li>
            <li><a href="123">5</a></li>
            <li><a href="123">6</a></li>
          </ul>
        </li>
        <li><a href="123">2</a></li>
        <li><a href="123">3</a></li>
      </ul>
    </li>
    <li><a href="123">2</a></li>
    <li><a href="123">3</a></li>
    <li><a href="123">4</a></li>
    <li><a href="123">5</a></li>
  </ul>
</div>

css:

div>ul {
  background-color : red;
}
div>ul>li {
  background-color : green;
  width : 25px;
  text-align :center;
}
div>ul>li>ul {
  background-color : yellow;
}
div>ul>li>ul>li {
  background-color : #790479;
  width : 25px;
}
div>ul>li>ul>li>ul {
  background-color :red;
}
div>ul>li>ul>li>ul>li>a {
  color: white;
  background-color: black;
  display : block;
  width : 25px;
}
ol {
  background-color : yellow;
}
ol>li>a {
  color : orange;
}
ol>li:last-child>a {
  color : white;
} 
ol>li {
  width: 25px; 
}
ol>li:nth-child(1n) {
  background-color: teal;
}
ol>li:nth-child(2n) {
  background-color: blue;
}

Оригинал:

И то что получается:

Подскажите, как сделать так, что бы блоки не перекрывали друг друга, особенно это видно на 2 и 4 уровне вложенности списков. Спасибо