选择具有相同类的某些元素

Question

我遇到了一个我不明白的奇怪问题。我想选择具有.select类的元素的第3个和后个。我认为这就像使用.select:nth-child(n+3)一样简单，但在我的例子中，我选择带有.box类的3rd和after元素。

为什么这不会过滤掉没有.select类的DIV？

会出现同样的结果

.select:nth-of-type(n+3)

.box {
      background: #000;
      margin-bottom: 6px;
      height: 20px;
      color: #FFF;
    }
    
    .select:nth-child(n+3) {
      background: red;
    }

    <div class="box">.box</div>
    <div class="box">.box</div>
    <div class="box">.box</div>
    <div class="box select">.box .select</div>
    <div class="box select">.box .select</div>
    <div class="box select">.box .select</div>