为什么嵌套的 nth-of-type 选择器不起作用？

Question

我需要的是，第一次出现的类“.has-error”内的文本框以红色突出显示。我试图嵌套 :nth-of-type 选择器，如下所示。它仅在 id 为“name”的 div 具有“has-error”类时才有效。但我在其他场景中不起作用。有人可以解释一下它不起作用的原因吗？

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

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

Answer 1

nth-of-type 只匹配元素而不匹配类名。