css - 在嵌套 div 中选择第一个 child

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在父组内。您只需要调整您的选择器以第一次出现 child <div>在 .row .

但是，如果第一个子 <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>