在div嵌套

Question

選擇第一個孩子，我有以下：

<div class="row"> 
    <div class="col-xs-4"> 
    <div class="form-group"> 
     <input class="form-control" required="required" type="text" name="order[name]" id="order_name" /> 
    </div> 
    </div> 
    <div class="col-xs-8"> 
    <div class="form-group"> 
     <input class="form-control" required="required" type="text" name="order[email]" id="order_email" /> 
    </div> 
    </div> 
</div> 
<div class="row"> 
    <div class="col-xs-4"> 
    <div class="form-group"> 
     <input class="form-control" required="required" type="text" name="order[age]" id="order_age" /> 
    </div> 
    </div> 
    <div class="col-xs-8"> 
    <div class="form-group"> 
     <input class="form-control" required="required" type="text" name="order[address]" id="order_address" /> 
    </div> 
    </div> 
</div> 

在每個.row，我想選擇第一個.form-control。我試過.row .form-control:first-child，但它選擇了全部.form-control。我做錯了什麼？

Answer 1

這是因爲它正在搜索父組中第一次出現form-control。您只需調整您的選擇器，即可在.row中首次發現子女<div>。

但是，如果第一個孩子<div>不是包含.form-control的那個，但我不知道標記的完整程度，所以這可能工作得很好，但我可以看到此選擇器存在潛在問題。

.row > div:first-child .form-control { 
 
    background: red; 
 
}

<div class="row"> 
 
    <div class="col-xs-4"> 
 
    <div class="form-group"> 
 
     <input class="form-control" required="required" type="text" name="order[name]" id="order_name" /> 
 
    </div> 
 
    </div> 
 
    <div class="col-xs-8"> 
 
    <div class="form-group"> 
 
     <input class="form-control" required="required" type="text" name="order[email]" id="order_email" /> 
 
    </div> 
 
    </div> 
 
</div> 
 
<div class="row"> 
 
    <div class="col-xs-4"> 
 
    <div class="form-group"> 
 
     <input class="form-control" required="required" type="text" name="order[age]" id="order_age" /> 
 
    </div> 
 
    </div> 
 
    <div class="col-xs-8"> 
 
    <div class="form-group"> 
 
     <input class="form-control" required="required" type="text" name="order[address]" id="order_address" /> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

的:first-child和:first-of-type選擇器相對於一個父元素工作。在您的選擇器中，正在.row中搜索孩子。因此，當它到達.row時，它會轉到col-xs-4和col-xs-8它所搜索的父母現在是這些col-xs。所以它看到了.form-control在這兩種情況下.form-control的是冷杉的孩子，所以它在.row的兩個選擇他們兩個。

如果您使用的是相同的結構，你可以這樣做：

.row .col-xs-4 .form-control { 
    background-color:red; 
} 

在這種情況下，.col-xs-4始終是第一位的，所以它看起來對.form-control僅在第一列。

現在讓我們假設你有一個不同的標記，而不是.col-xs-4和.col-xs-8你有兩個.col-xs-4的。在這種情況下，你可以這樣做：

.row .col-xs-4:first-of-type .form-control { 
    background-color:red; 
} 

的jsfiddle：http://jsfiddle.net/4mfvs2sc/ [不同的列] http://jsfiddle.net/rmggct9v/ [相同的列]

希望幫助！