选择具有容器

Question

，我有以下的HTML一个div的第一个孩子：

<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元素元素，就像在第三个示例中一样，您可以省略.form-group元素中的:first-child伪类：

Updated Example

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

---

当然，这不会在所有实例，例如当第一.cont元素不包含.form-group元素工作。值得指出的是，您的选择器form .cont .form-group:first-child不起作用，因为.form-group元素不是兄弟元素。