CSS，n-child不起作用？

Question

我正在构建一个表单，但出于一个疯狂的原因，nth-child似乎不能在输入字段上工作。一个jsfiddle来说明问题：http://jsfiddle.net/nGuLp/。第二个输入字段不应该获得边距权限，但确实如此。为什么这不起作用？ HTML：

<div class="block-inner">
<h1>Blah</h1>
<hr />
<input type="text" placeholder="Voornaam" name="firstname" id="firstname" class="left" />
<input type="text" placeholder="Achternaam" name="surname" id="surname" class="left"    />

</div>

CSS：

input {
width: 45%;
margin-right: 10%;
}

input:nth-child(2){
margin-right: 0;
}

Answer 1

您需要使用:nth-of-type(n)，否则计数器会为.block-inner内的每个元素递增，因此两个输入会产生第3和第4个位置。

Answer 2

你可以这样做，这是css2，所有浏览器都支持。

div input + input{ }

将选择第二个输入。

如果输入是第二个孩子，您的第二个孩子将选择输入。 div中的第二个孩子是hr。

Answer 3

nth-child选择器不会挑出相同类型的元素。您的第一个输入元素是其父元素的第三个子元素。