针对 input type="text" 的 :first-of-type 选择器

Question

针对 input type="text" 的 :first-of-type 选择器

3

我有以下情况：

<input type="hidden">
<input type="text">
<input type="hidden">
<input type="text">
<input type="text">
<input type="text">
<input type="hidden">
<input type="submit">

我该如何仅选择前两个 [type="text"] 的 input？

如您在这里所见，第一个 input[type="text"] 并未按我所需的样式进行排列。示例

- gespinha

只为那些需要样式的元素添加一个类？ - Paul C

如果您的输入数量发生更改，使用纯CSS是不可能实现的。请改用JavaScript。 - singe3

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- BoltClock · Accepted Answer

尽管它们的名称可能表明，：first-of-type和：nth-of-type（）不考虑元素上的type属性或任何其他元素上的任何其他属性。它只考虑元素的类型，而在所有元素的情况下都是input。扩展一下，：first-child和：nth-child（）在计数时考虑同一父级的所有子代。因此，这两个伪类家族都不能用于解决您的问题。

由于您正在使用元素，这使得问题更加困难，因为表单元素具有特殊的系统默认样式，无法使用常规CSS（或任何CSS）应用。是否可以解决您的问题取决于您希望对前两个input [type ="text"]元素应用什么样的样式。

如果您应用的样式不会对默认样式产生不良影响（例如display：none），或者根本不关心默认样式，则像我在这里和这里描述的那样使用常规同级组合器〜将起作用（请注意使用两个〜组合器，因为您要样式化前两个元素而不仅仅是第一个）。

input[type="text"] {
    /* 
     * Apply styles to all input[type="text"].
     */
}

input[type="text"] ~ input[type="text"] ~ input[type="text"] {
    /* 
     * Undo or override styles applied in the first rule for any input[type="text"]
     * that follows at least two other input[type="text"].
     */
}

否则，如果您需要保留后续元素的默认样式，则此技术将无法起作用，因为您无法在修改它们后恢复默认样式。在这种情况下似乎没有解决方案。