第一個輸入的CSS選擇器

我想從此結構中選擇第一個輸入。我只需要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/但你可以看到它同時選擇。

來源

2015-09-04 Logans

CSS選擇器可以是這樣的：

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

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

來源

2015-09-04 06:21:59 dfsq

爲什麼在問題的CSS選擇器不工作？ –

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

Jsfiddle Demo

來源

2015-09-04 07:17:26

第一個輸入的CSS選擇器

回答

相關問題