Question

我参加了this question（这个问题与他的问题根本没有关系），并尝试通过应用CSS选择器来解决它，具体取决于复选框是否已勾选。我的想法是，如果有一个元素:checked，前面的提交按钮应该是可见的。我想出的CSS是：

input[type=checkbox]:checked ~ input[type=submit] {
    display:block;
}

现在，当页面加载时，提交按钮将被隐藏，就像它应该的那样。但是，当你选中一个方框时，没有任何事情发生（大概是应该的？）。

如果加载带有一个输入字段并且选中了属性的表单，它确实可以看到提交按钮，但是当你取消它时，提交按钮不会隐藏。

当您通过Javascript克隆表单（勾选一个复选框）时（此练习的全部目的不是使用Javascript），它会执行预期的结果，即如果没有选中复选框，则隐藏提交按钮，如果勾选了复选框，则显示它。

换句话说，该css规则没有考虑对dom的更改，但在放入新元素时会考虑到它。这是否按预期工作？首先，我发现CSS会发生类似的情况。

我是否在这里遗漏了某些东西，或者它不应该如我所描述的那样起作用？

使用firefox测试

编辑，并且工作正常，所以这似乎是Google Chrome的一个问题。未尝试使用IE或Opera的更高版本。

Answer 1

您的CSS看起来是正确的，但浏览器支持当然有所不同，并且支持的位置会有错误。 Javascript会更可靠。

Answer 2

Webkit与兄弟姐妹和兄弟姐妹结合使用时会出现问题。我遇到了一些问题：悬停，可能会发生同样的事情：检查。它应该在最近的夜间铬构建中修复。如果是这样，这个bug有时会以稳定的chrome版本结束。