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的第一次出现。您只需调整选择器即可在<div>中第一次出现孩子.row。

我可以看到此选择器存在潜在问题，但是，如果第一个孩子<div>不是包含.form-control的孩子，但我不知道你的全部范围标记，所以这可以正常工作。

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

"no"和while (retry != "yes" && retry != "no") {选择器适用于父元素。在您的选择器中，正在: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

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

希望有所帮助！

在嵌套div中选择first-child

2 个答案: