CSS3如何只对div中的第一个div使用样式

Question

代码：

<div class="BlockContent">
    <div class="input">
        <div class="icon">&nbsp;</div>
        <input type="text" name="username">
    </div>
    <div class="input">
        <div class="icon"></div>
        <input type="password" name="username">
    </div>
</div>

CSS：

.BlockContent .input:first{
    margin-top: 16px;
}
.BlockContent .input{
    margin-bottom: 8px;
}

请告诉我如何更改css .BlockContent .input:first行，即只有第一个div.input具有样式margin-top: 16px;？

Answer 1

您正在寻找:first-child

.BlockContent .input:first-child {}

Answer 2

尝试.BlockContent .input:first-child { ... }

Answer 3

我想你只是漏掉了一个词。

.BlockContent .input:first-child{
    margin-top: 16px;
}

Answer 4

这里不是一个直接的答案，而是一个更好的解决方案。与其填充一个空的、非语义的div，不如在现有元素上添加填充或边距。例如，可以在input容器上设置顶部内部填充，或者在输入本身上设置顶部边距。