CSS Nth-Of-Type不选择整数子

Question

我的代码使用javascript循环来生成具有各种类的嵌套div。我在那些嵌套的div中选择某个类的nth-child时遇到了麻烦。 javascript运行后，我的html应该是这样的。

＆＃13;

＆＃13;

.twoN:nth-of-type(1) {
    background-color: orange;
}

.twoN:nth-child(2){
  background-color:orange;
}

＆＃13;

 <div id="grid">
        <div style="width:50px; height:50px; color: white; background-color:blue" class="item oneN">1</div>
        <div style="width:50px; height:50px; color: white; background-color:red" class="item twoN">1</div>
        <div style="width:50px; height:50px; color: white; background-color:green" class="item twoN">1</div>
        <div style="width:50px; height:50px; color: white; background-color:purple" class="item threeN">1</div>
 </div>

＆＃13;

＆＃13;

＆＃13;

我试图用类＆＃34; twoN＆＃34;选择第一个或第二个div。但由于某种原因，如果我使用n变量，我只能使Nth-Of-Type选择器工作。 nth-of-type（2n + 1），但如果我想通过做类似nth-of（1）的东西来选择第一个孩子，它就不会工作。我也直接尝试了nth-child（1）并且似乎也没有工作。我认为我犯了某种层次错误。