Question

我正在尝试选择不是type="hidden"的表单中的第一个输入。

请考虑以下形式：

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

如果我想将特定样式应用于用户名字段。我假设我可以使用它或类似的东西。但是，到目前为止我没有尝试过任何工作。

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

我甚至可以使用像input[type=text]:first-child这样的东西，但这也不行。

Here is the fiddle我在撰写此问题时使用过。

Answer 1

您的示例不起作用，因为:first-child伪类只会选择元素（如果它是第一个子元素）。由于第一个非隐藏input元素不是第一个子元素，因此未选择任何内容。

根据您提供的HTML，您可以使用选择器的组合来实现此目的。

第一个选择器可以是input:not([type="hidden"]):first-of-type，以便选择任何非隐藏的input元素，如果它是第一个类型。

下一个选择器选择隐藏的input元素（如果它是第一个类型），然后使用相邻的兄弟组合符+，以便选择下一个非隐藏的input元素：

＆＃13;

input:not([type="hidden"]):first-of-type,
input[type="hidden"]:first-of-type + input:not([type="hidden"]) {
  background: orange;
}

＆＃13;

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

＆＃13;

由于:first-of-type伪类通过其类型选择第一个元素，即使第一个子元素是图例，它也会起作用：

＆＃13;

input:not([type="hidden"]):first-of-type,
input[type="hidden"]:first-of-type+input:not([type="hidden"]) {
  background: orange;
}

＆＃13;

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

＆＃13;

但是，由于您声明隐藏的input元素始终是第一个，因此以下选择器就足够了：

＆＃13;

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

＆＃13;

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

＆＃13;

但请记住，如果有两个连续的隐藏input元素，则不会起作用，如下例所示。要解决此类情况，您需要执行其他答案建议并选择所有input元素，然后使用通用兄弟组合器~覆盖以下所有兄弟元素。如果您的HTML与上述任何示例不同，我建议您这样做。

＆＃13;

input:not([type="hidden"]):first-of-type,
input[type="hidden"]:first-of-type+input:not([type="hidden"]) {
  background: orange;
}

＆＃13;

<p> Example demonstrating that it doesn't work with two consecutive hidden input elements: </p>

<form>
  <fieldset>
    <legend>Title</legend>
    <input type="hidden" name="token" value="ABC123">
    <input type="hidden" name="token" value="ABC123">
    <input type="text" name="username">

    <input type="hidden" name="token" value="ABC123">
    <input type="password" name="password">
  </fieldset>
</form>

＆＃13;

Answer 2

所以问题是CSS转换为＆＃34;选择第一个输入子项，如果它的类型没有被隐藏＆＃34;，因为类型被隐藏，你的CSS不适用。

你需要做的是让CSS适用于所有不被隐藏的输入，然后关闭所有不是第一个的兄弟姐妹（这对我来说适用于Chrome）

＆＃13;

input:not([type="hidden"]) {
  background: orange;
}

input:not([type="hidden"]) ~ input:not([type="hidden"]) {
  background: white;
}

＆＃13;

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

＆＃13;

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

2 个答案: