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

我有以下html:

我想只选择第一个表格组.

这是很容易实现的时候.form-group不被包含.cont,例如工作在这里.

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

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

我明白为什么这不起作用,这里很容易看到.

这是一个现场解释.,我该如何只选择第一个表格组？

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

更新的示例

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

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

更新的示例

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

当然,这不适用于所有情况,例如第一个.cont元素不包含.form-group元素时.值得指出的是,你的选择器form .cont .form-group:first-child没有工作,因为.form-group元素不是兄弟元素.