通用兄弟组合器（~），不更新 DOM 更改，按预期工作？答案

【问题标题】：General sibling combinator (~), not updating on DOM changes, working as intended?通用兄弟组合器（~），不更新 DOM 更改，按预期工作？
【发布时间】：2011-09-07 04:59:17
【问题描述】：

我在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。

【问题讨论】：

标签： html css google-chrome css-selectors

【解决方案1】：

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

【讨论】：

如何应用 css，不应该根据内容是在文档加载时加载还是在加载期间更改，或者是否被克隆等而改变？
正确。 CSS 选择器应该在 DOM 更新时总是被重新评估（并且在这个区域有大量的浏览器错误）。

【解决方案2】：

Webkit 在与伪类结合使用时会出现兄弟和相邻问题。我在使用 :hover 时遇到了一些问题，同样的事情也可能发生在 :checked 上。它应该在最近的夜间铬构建中得到修复。如果是这样的话，这个错误会在某个时候以稳定的 chrome 版本结束。

【讨论】：