选择嵌套div中的第一个孩子

Victor 发表于 Dev

胜利者

我有以下几点：

<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。我做错了什么？

阿吉特

那是因为它正在搜索form-control父组中的第一次出现。您只需要调整选择器，即可使中的第一个孩子<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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。