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;
}

请告诉我如何更改第c .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容器上设置顶部内部填充，或者在输入本身上设置上边距。