html - 按顺序排列的 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 示例中一样。

谢谢。

标签： htmlcssforms

Answer 1

试试 :nth-child，像这样：

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