CSS 选择器 form:last-child 不工作

Question

似乎 CSS 伪 class :last-child 不适用于表单元素，但 :first-child 可以。

form:first-child {
  border: 1px solid blue;
}
form:last-child {
  border: 1px solid red;
}

<body>
  <form>
    <p>First Form</p>
  </form>
  <form>
    <p>Second Form</p>
  </form>
</body>

我只对表单元素本身的样式感兴趣，而且我只在 Chrome 中对此进行了测试。第一个表格有蓝色背景，第二个表格没有背景。 Chrome 的检查器也没有显示 :last-child 应用于第二种形式。那么 select 如何使用 CSS 的最后一种形式？

Answer 1

问题：

改用 (first)/last-of-type，因为它更安全，因为您只想定位 forms

The :last-of-type CSS pseudo-class represents the last element of its type among a group of sibling elements.

form:first-of-type {
  border: 1px solid blue;
}

form:last-of-type {
  border: 1px solid red;
}

<form>
  <p>First Form</p>
</form>
<form>
  <p>Second Form</p>
</form>

如果你想使用 (first)/last-child 那么你需要在你的选择器中添加 parent 和 HTML （如果你没有）

The :last-child CSS pseudo-class represents the last element among a group of sibling elements

section form:first-child {
  border: 1px solid blue;
}

section form:last-child {
  border: 1px solid red;
}

<section>
  <form>
    <p>First Form</p>
  </form>
  <form>
    <p>Second Form</p>
  </form>
</section>

Answer 2

为了使用 first-child 和 last-child，您需要参考它们的 'parent'，如下例所示。

.container form:first-child {
  border: 1px solid blue;
}

.container form:last-child {
  border: 1px solid red;
}

<div class='container'>
  <form>
    <p>First Form</p>
  </form>
  <form>
    <p>Second Form</p>
  </form>
</div>

您可以在 this thread

上阅读有关这些伪选择器的更多信息

Answer 3

这在您创建适当的 HTML 文件时工作得很好，它在您的 fiddle 中不起作用的原因是因为某些在线工具会在正文元素结束标记之前添加一些脚本，因此您期望具有样式的形式实际上不是正文的 last-child.

要查看它在您的 fiddle 上的工作情况，只需将表单包装在 div 容器中，您应该会按预期看到它：

<body>
  <div>
    <form>
      <p>First Form</p>
    </form>
    <form>
      <p>Second Form</p>
    </form>
  </div>
</body>

您可以参考this question了解更多信息。

Answer 4

你的第二个表格不是他 parent 的最后一个 child。最后 child 是 script （jsfiddle 添加了这个标签。），所以你可以使用：

form:nth-child(2)
// or
form + form
// or
form:last-of-type
// or
form:nth-last-child(2)