为什么嵌套的第n个类型选择器不起作用？

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仅匹配元素而不匹配类名。