html - CSS，nth-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因此两个输入会导致第三和第四位置。

Answer 2

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

div input + input{ }

将选择第二个输入。

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

Answer 3

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