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，您可以选择第一个.form-group元素中的第一个.cont元素：

Updated Example

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

如果.form-group元素中没有嵌套多个.cont元素，就像在第三个示例中一样，您可以省略: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元素不是兄弟元素。

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

1 个答案: