div元素仅在CodePen上从nth-child（2）开始，而不是nth-child（1）

Question

这是笔：

https://codepen.io/Blue_5/pen/pLKzmX?editors=0100

CSS：

＆＃13;

＆＃13;

.colors {
      position: absolute;
      top: 25px;
      height: 25px;
      width: 25px;
      border-radius: 100%;
    }
    .colors:nth-child(2) {
      /* The first Child */
      left: 65px;
      background: rgba(255, 128, 0, 1);
    }
    .colors:nth-child(3) {
      left: 105px;
      background: rgba(255, 255, 0, 1);
    }
    .colors:nth-child(4) {
      left: 145px;
      background: rgba(0, 160, 0, 1);
    }
    .colors:nth-child(5) {
      left: 185px;
      background: rgba(64, 200, 255, 1);
    }
    .colors:nth-child(6) {
      left: 225px;
      background: rgba(0, 128, 200, 1);
    }
    .colors:nth-child(7) {
      left: 265px;
      background: rgba(0, 0, 0, 1);
    }
    .colors:nth-child(1) {
      left: 305px;
      background: rgba(255, 0, 0, 1);
    }

＆＃13;

<div class='colors'></div>
<div class='colors'></div>
<div class='colors'></div>
<div class='colors'></div>
<div class='colors'></div>
<div class='colors'></div>
<div class='colors'></div>

＆＃13;

＆＃13;

＆＃13;

HTML：

<div class='colors'></div>
<div class='colors'></div>
<div class='colors'></div>
<div class='colors'></div>
<div class='colors'></div>
<div class='colors'></div>
<div class='colors'></div>

我正在尝试使用代码段上的 nth-child（1）选择第一个子元素，这里工作正常。但是，同样不适用于CodePen。真奇怪！

请帮助我！