2015-09-04 90 views
2

我想从此结构中选择第一个输入。我只需要CSS选择器,而不是jQuery。第一个输入的CSS选择器

<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/但你可以看到它同时选择。

回答

0

CSS选择器可以是这样的:

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

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

+1

为什么在问题的CSS选择器不工作? –

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

Jsfiddle Demo