Html 选择表单中的第一个非隐藏输入

我正在尝试以非

type=“hidden”

的形式选择第一个输入

考虑这种形式：

<form>
  <input type="hidden" name="token" value="ABC123">
  <input type="text" name="username">
  <input type="password" name="password">
</form>

我甚至可以使用类似于

input[type=text]：first child

的东西，但这也不行

---

我在写这个问题时使用了。

您的示例不起作用，因为

：first child

伪类只会选择第一个子元素。由于第一个非隐藏的

输入

元素不是第一个子元素，因此未选择任何内容

---

基于您提供的HTML，您可以使用选择器的组合来实现这一点

第一个选择器可以是

input:not（[type=“hidden”]）：类型的第一个

，以便选择任何非隐藏的

input

元素（如果它是类型的第一个）

下一个选择器选择隐藏的

输入

元素（如果它是类型的第一个），然后利用相邻的同级组合符

+

），以选择以下下一个非隐藏的

输入

元素：

input:not（[type=“hidden”]）：类型的第一个，
输入[type=“hidden”]：类型+输入的第一个：非（[type=“hidden”]）{
背景：橙色；
}

---

所以问题是CSS转换为“如果类型未隐藏，请选择第一个输入子项”，因为类型是隐藏的，所以CSS不适用

相反，您需要做的是将CSS应用于所有未隐藏的输入，然后对所有不是第一个输入的兄弟姐妹关闭CSS（这对我在Chrome上很有用）

输入：非（[type=“hidden”]）{
背景：橙色；
}
输入：不（[type=“hidden”]）~input:not（[type=“hidden”]））{
背景：白色；
}

隐藏的输入是否总是在那里，并且是第一个？它是一个或多个隐藏的输入，然后是一个文本输入。此解决方案运行良好，但与我已经在做的工作不完全匹配。谢谢你，非常方便。

input:not([type=hidden]):first-child {
  background: orange;
}