Question

我遇到以下情况：

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

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

正如您在此处所看到的，第一个input[type="text"]不是我需要的样式。

DEMO

Answer 1

尽管他们的名字可能暗示，:first-of-type和:nth-of-type()不考虑type元素上的input属性，或任何其他元素上的任何其他属性。它只考虑元素的类型，在所有元素的情况下都是input。根据扩展，:first-child和:nth-child()会在计算时考虑同一父母的所有子项。因此，两个伪类都不能用于解决您的问题。

您使用input元素的事实使得这更加困难，因为表单元素具有特殊系统默认样式的性质无法使用传统CSS（或任何CSS）应用。您的问题是否可以解决取决于您希望将哪种样式应用于前两个input[type="text"]元素。

如果您正在应用不会对默认样式产生负面影响的样式（例如display: none），或者您根本不关心默认样式，那么请使用general sibling combinator ~就像我描述here和here一样有用（请注意使用两个~组合器，因为您正在寻找前两个元素的样式，而不仅仅是第一个）：

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"].
     */
}

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

：输入类型=“text”的第一个类型选择器

1 个答案: