html - 选择具有容器的 div 的第一个子项

Question

我有以下 html:

<form action="">
  <div class="cont">
    <div class="form-group">
      <input type="text">
    </div>
  </div>
  <div class="cont">
    <div class="form-group">
      <input type="text">
    </div>
  </div>
  <div class="cont">
    <div class="form-group">
      <input type="text">
    </div>
  </div>
</form>

我只想选择第一个表单组。

当 .form-group 不包含在 .cont 中时，这很容易实现，工作示例 here .

我一直在尝试下面的内容和类似的东西:

form .cont .form-group:first-child{
  outline: 1px solid red;
}

我明白为什么这不起作用，很容易想象 here .

Here's a live explample. , 如何只选择第一个表单组？

Answer 1

根据第二个示例中的 HTML，您可以在第一个 .cont 元素中选择第一个 .form-group 元素:

Updated Example

form .cont:first-child .form-group:first-child {
  outline: 1px solid red;
}

如果 .cont 元素中没有嵌套多个 .form-group 元素，就像在您的第三个示例中一样，您可以省略 :first -child 来自 .form-group 元素的伪类:

Updated Example

form .cont:first-child .form-group {
  outline: 1px solid red;
}

---

当然，这不适用于所有实例，例如当第一个 .cont 元素不包含 .form-group 元素。值得指出的是，您的选择器 form .cont .form-group:first-child 不起作用，因为 .form-group 元素不是同级子元素。