CSS 第一个输入的选择器

Question

我想select首先从这个结构中输入。我只需要 CSS select 或者不需要 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>

我正在做这样的事情 http://jsfiddle.net/T4kAq/60/ 但如您所见 select 两者都是。

Answer 1

CSS 选择器可以是这样的：

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

演示： http://jsfiddle.net/T4kAq/61/

Answer 2

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

Jsfiddle Demo

CSS 第一个输入的选择器

CSS selector of first input

html

css

selector