css - 如何使用 CSS 动态选择最后选中的复选框？

Question

我的页面中有很多“复选框”。我想显示(display:block;) 一个框，如果我的页面的最后一个“复选框”被选中，使用 CSS。该框是最后一个“复选框”之后的直接“文本框”。:last-child 似乎不适用于 input[type="checkbox"]。即使它有效，还会有另一个问题:我可以在它(:last-child)之后立即使用另一个选择器(:checked)吗？

这是我尝试的(但没有回答):

input[type = "checkbox"]:last-child:checked ~ input[type = "text"]{ display : block; }

Answer 1

您可以尝试使用.. (我现在无法测试它是否有效)

input:checked:last-child
{
...
}

编辑:我已经更正了选择器并对其进行了测试。作品! Here a working sample