html - CSS 选择器形式 :last-child doesn't work

<分区>

看起来 CSS 伪类 :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 应用于第二种形式。那么如何使用 CSS 选择最后一个表单呢？

最佳答案

当您创建一个正确的 HTML 文件时，它工作得很好，它在您的 fiddle 中不起作用的原因是因为一些在线工具在 body 元素结束标记之前添加了一些脚本，因此您期望的表单具有造型，实际上并不是 body 的最后一个 child 。

要看到它在你的 fiddle 上工作，只需将表单包装在一个 div 容器中，你应该会按预期看到它:

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

可以引用this question了解更多信息。

关于html - CSS 选择器形式 :last-child doesn't work，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47513183/