爲什麼嵌套的nth類型選擇器不工作？

Question

我需要的是，第一次出現的類「.has-error」中的文本框以紅色突出顯示。我試圖嵌套如下的第n個類型選擇器。它只適用於id爲「name」的div具有「has-error」類的情況。但我沒有在其他情況下工作。有人能解釋我爲什麼不工作的原因嗎？

.fields input[type="text"] { 
 
\t color: #000; 
 
\t border: 1px solid #000; 
 
} 
 
.fields > .error:nth-of-type(1) > .has-error:nth-of-type(1) input[type="text"] { 
 
\t color: #f00; 
 
\t border-color: #f00; 
 
}

<div class="fields"> 
 
\t <div class="col error"> 
 
\t \t <div id="name" class="input"> 
 
\t \t \t <input type="text" name="name" /> 
 
\t \t </div> 
 
\t \t <div id="email" class="input has-error"> 
 
\t \t \t <input type="text" name="email" /> 
 
\t \t </div> 
 
\t </div> 
 
\t <div class="col error"> 
 
\t \t <div id="age" class="input has-error"> 
 
\t \t \t <input type="text" name="age" /> 
 
\t \t </div> 
 
\t \t <div id="phone" class="input has-error"> 
 
\t \t \t <input type="text" name="phone" /> 
 
\t \t </div> 
 
\t </div> 
 
</div>

Answer 1

nth-of-type僅匹配的元素，而不是類名。