不要涂块

Question

我在纯CSS上解决了这个问题。

条件：有必要在不使用类和标识符的情况下（我们不向html代码添加任何内容）使用CSS重新创建此数据 图片。

这就是我所做的：

我的代码：https://codepen.io/dinclaise/pen/XLBzGx

HTML代码：

<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>

CSS代码：

/* Inner block ol*/

ol { background-color: #ffff00 }

ol li:nth-child(odd) { background-color: #acd8e3 }

ol li:nth-child(even) { background-color: #0100fb }

ol li a:last-child { color: #e0eeef }

ol li a { color: #c8ab71 }



/* Outer blocks li*/

/* Common colors - общие цвета */

ul { background-color: #fe0000; }

ul li ul { background-color: #ffff00; }

ul li ul li ul { background-color: #fe0000; }



/* Paint blocks and numbers */

ul li { width: 27.5px; background-color: #008001;  text-align: center;  }

ul li a { color: #ffdcff }

ul li:last-child a { color: #001e00 }

ul ul li {  background-color: #7f0087; }

ul ul li a { color: #dbedf9 }

ul ul li:last-child a { color: #ffd7ad }

ul ul ul li {  background-color: #020100; }

我希望突出显示的矩形为绿色的区域。

原始的，应该是