在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/ [相同的列]

希望帮助！