一般兄弟组合子(〜),没有更新DOM更改,按预期工作?

时间:2011-06-02 16:06:00

标签: html css google-chrome css-selectors

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

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

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

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

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

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

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

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

使用firefox测试

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

2 个答案:

答案 0 :(得分:1)

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

答案 1 :(得分:0)

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