Html 第一个输入的CSS选择器

我想从这个结构中选择第一个输入。我只需要CSS选择器，不需要jQuery

<div class="sonata-ba-collapsed-fields">
    <div class="form-group" id="sonata-ba-field-container-s55e92cd5ce823_logoFile">
        <label class=" control-label">Logo File</label>

        <div class=" sonata-ba-field sonata-ba-field-standard-natural  ">
            <div class="vich-image">
                <div class="form-group ">
                    <label class=" control-label" for="s55e92cd5ce823_logoFile_file">Logo File</label>

                    <div class="">
                        <input type="file" id="s55e92cd5ce823_logoFile_file" name="s55e92cd5ce823[logoFile][file]" class=" form-control">
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="form-group" id="sonata-ba-field-container-s55e92cd5ce823_iconFile">
        <label class=" control-label">Icon File</label>

        <div class=" sonata-ba-field sonata-ba-field-standard-natural  ">
            <div class="vich-image">
                <div class="form-group ">
                    <label class=" control-label" for="s55e92cd5ce823_iconFile_file">Icon File </label>

                    <div class="">
                        <input type="file" id="s55e92cd5ce823_iconFile_file" name="s55e92cd5ce823[iconFile][file]" class=" form-control">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

徽标文件
徽标文件
图标文件
图标文件

---

我正在做类似的事情，但正如您所看到的，它选择了两者。

CSS选择器可以是这样的：

div.sonata-ba-collapsed-fields>。表单组：第n个子（1）输入{
背景色：#ff0000；
}

演示：

div.sonata-ba-collapsed-fields >  .form-group:first-child input:nth-child(1) {
    background-color: #ff0000;
}