Html 选择具有容器的div的第一个子级

我有以下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>

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

---

，如何仅选择第一个表单组？

根据第二个示例中的HTML，您可以选择第一个

元素中的第一个
。表单组
元素。cont
元素：


如果在
.cont
元素中没有嵌套多个
.form group
元素，就像在第三个示例中一样，可以从
表单组
元素中省略
:first child
伪类：



当然，这并不适用于所有情况，例如第一个
.cont
元素不包含
.form group
元素时。值得指出的是，您的选择器
form.cont.form组：第一个子元素
不起作用，因为
.form组
元素不是同级子元素。
根据第二个示例中的HTML，您可以选择第一个
元素中的第一个
.form组
元素


如果在
.cont
元素中没有嵌套多个
.form group
元素，就像在第三个示例中一样，可以从
表单组
元素中省略
:first child
伪类：



当然，这并不适用于所有情况，例如第一个
.cont
元素不包含
.form group
元素时。值得指出的是，您的选择器
form.cont.form组：first child
不起作用，因为
.form组
元素不是同级子元素。
太棒了！这正是我所需要的，如此简单，但我从未想过！！非常感谢，我会尽快接受答案！令人惊叹的！这正是我所需要的，如此简单，但我从未想过！！非常感谢，我会尽快接受答案！这是什么？form.cont:first child div.form-group{…@daremachine确切地说，回想起来很简单，我只是在将第一个孩子放在选择器的最后一部分时被阻止了。示例是什么？form.cont:first child div.form-group{…@daremachine确切地说，回想起来，这很简单，我只是在选择器的最后一部分只放了第一个孩子时被某种方式阻止了
form .cont .form-group:first-child{
  outline: 1px solid red;
}

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

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