Html CSS选择器窗体：最后一个子项不'；行不通
CSS伪类Html CSS选择器窗体：最后一个子项不'；行不通,html,css,css-selectors,pseudo-class,Html,Css,Css Selectors,Pseudo Class,CSS伪类：last child似乎对表单元素不起作用，但：first child起作用 表格：第一个孩子{ 边框：1px纯蓝色； } 表格：最后一个孩子{ 边框：1px纯红； } 第一种形式 第二种形式 问题： -您还有其他兄弟姐妹，如脚本下面的表单，因此这些将成为最后一个孩子 解决方案 请改用（first）/因为这样更安全，因为您只希望以表单为目标 CSS伪类的：last类型表示其 在一组同级元素中键入 表单：类型的第一个{ 边框：1px纯蓝色； } 形式：最后一种{ 边框：1px纯
：last child：first child表格：第一个孩子{
边框：1px纯蓝色；
}
表格：最后一个孩子{
边框：1px纯红；
}
第一种形式
第二种形式
脚本下面的表单
，因此这些将成为最后一个孩子
解决方案
请改用（first
）/因为这样更安全，因为您只希望以表单
为目标
CSS伪类的：last类型表示其
在一组同级元素中键入
表单：类型的第一个{
边框：1px纯蓝色；
}
形式：最后一种{
边框：1px纯红；
}
第一种形式
第二种形式
要使用第一个孩子和最后一个孩子，您需要参考他们的“家长”，如下面的示例所示
。容器形式：第一个子容器{
边框：1px纯蓝色；
}
.容器形式：最后一个子容器{
边框：1px纯红；
}
第一种形式
第二种形式
当您创建一个合适的HTML文件时，它就可以正常工作了，在您的小提琴中它不起作用的原因是一些在线工具在body元素结束标记之前添加了一些脚本，因此您希望具有样式的表单实际上不是body的最后一个子表单
要看到它在小提琴上工作，只需将表单包装在一个div容器中，您就可以看到它了：
<body>
<div>
<form>
<p>First Form</p>
</form>
<form>
<p>Second Form</p>
</form>
</div>
</body>
第一种形式
第二种形式
有关更多信息，请参阅。您的第二张表格不是其父母的最后一个孩子。最后一个子项是script
（JSFIDLE添加了此标记），因此您可以使用：
form:nth-child(2)
// or
form + form
// or
form:last-of-type
// or
form:nth-last-child(2)
两个答案都解决了问题，但我认为这一个更好地解释了OP原始解决方案不起作用的原因。奇怪的是，当向选择器添加body
时form:last child
仍然不起作用，更奇怪的是，这两个选择器在最后一个子上仍然有效：form:not（：first child）{}form not（：last child）{
Yep，就这样。哇-很简单，很容易被忽视。很注意细节。