按顺序排列的CSS目标文本输入字段[重复]

Question

我有一个带有以下文本输入字段的 html 表单。没有class，没有id，同类型。

我需要以不同的方式设置它们的样式。

是否可以使用纯 CSS 按顺序定位它们？

类似：

CSS（不工作）

input[0] {
  height: 100px;
}

input[1] {
  height: 150px;
}

input[2] {
  height: 200px;
}

<input name="arr[]" type="text">
<input name="arr[]" type="text">
<input name="arr[]" type="text">

我知道我可以使用 :nth-child 或 :nth-of-type，但我想知道是否还有其他方法可以定位这些元素，例如我的CSS 示例。

谢谢。

Answer 1

试试 :nth-child，像这样：

input:nth-child(1) {
  height: 100px;
}
input:nth-child(2) {
  height: 150px;
}
input:nth-child(3) {
  height: 200px;
}