Question

似乎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选择最后一个表单？

Answer 1

问题：

解决方案（多个）

使用（first）/ last-of-type代替，因为它更安全，因为您只想定位form s

:last-of-type CSS伪类表示其最后一个元素在一组兄弟元素中键入。

＆＃13;

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

＆＃13;

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

＆＃13;

如果您想使用（first）/ last-child，则需要在选择器和HTML中添加父级（如果您没有）

:last-child CSS伪类表示a中的最后一个元素一组兄弟元素

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

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

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