html - 通用兄弟组合器 (~)，不更新 DOM 更改，按预期工作？

Question

我尝试了 this question (这个问题与他的问题完全无关)，并尝试根据是否勾选复选框来应用 CSS 选择器来解决它。我的想法是，如果有一个元素是 :checked，则前面的提交按钮应该是可见的。我想出的结果 CSS 是:

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

现在，当页面加载时，提交按钮被隐藏了，这是应该的。但是，当您选中一个框时，什么也没有发生(大概应该吧？)。

如果您使用一个选中属性的输入字段加载表单，它会显示提交按钮，这是应该的，但是当您取消选中它时，提交按钮不会隐藏。

当您通过 Javascript 克隆表单(勾选一个复选框)时(本练习的全部目的不是使用 Javascript)，它确实会达到预期的结果，即如果没有选中复选框则隐藏提交按钮, 或者在勾选复选框时显示它。

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

示例:http://jsfiddle.net/niklasvh/nn4Qw/

我是不是漏掉了什么，或者它不应该像我描述的那样工作？

Edit 在 firefox 上测试过，工作正常，所以这似乎是 google chrome 的问题。未尝试使用更高版本的 IE 或 Opera。

Answer 1

您的 CSS 看起来是正确的，但是浏览器的支持当然会有所不同，而且在有 支持的地方，就会有错误。 Javascript 会更可靠。