一般兄弟组合器（〜），不更新DOM更改，按预期工作？ [英] General sibling combinator (~), not updating on DOM changes, working as intended?

问题描述

我在这个问题上有过一次（这个问题不相关他的问题），并试图通过应用CSS选择器来解决它，取决于复选框是否被勾选。我的想法是，如果有一个元素：checked ，前面的提交按钮应该是可见的。我得到的CSS我想出了：

I had a go at at this question (this question isn't related at all to his question), and tried to solve it through applying CSS selectors depending on whether the checkboxes had been ticked. The idea I had, was that if there is an element which is :checked, the preceeding submit button should be visible. The resulting CSS I came up with was:

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

现在，当页面加载时，提交按钮被隐藏应该。

Now, when the page is loaded, the submit button is hidden, as it should. But, when you check a box, nothing happens (presumably it should?).

如果你加载一个输入字段并且属性为checked的表单，它就会有提交

If you load the form with one input field with attribute checked, it does have the submit button visible, as it should, but when you untick it, the submit button doesn't hide.

当您通过Javascript克隆表单（勾选一个复选框）时，按钮会显示，但是当您取消选中它时，提交按钮不会隐藏。 （和本练习的整个目的不是使用Javascript），它做预期的结果，即如果没有复选框被选中隐藏提交按钮，或如果复选框被选中显示它。

When you clone the the form (with one checkbox ticked) through Javascript (and the whole purpose of this exercise was not to use Javascript), it does do the expected result, i.e. either hides the submit button if no checkboxes were checked, or displays it if a checkbox was ticked.

换句话说，css规则没有考虑对dom的更改，但是在添加新元素时会考虑到它。这是否如预期的那样工作？

In other words, that css rule does not take into account changes to the dom, but does take it into account when new elements are put in. Is that working as intended? First I've seen something like that happen with CSS.

例如： http://jsfiddle.net/niklasvh/nn4Qw/

我在这里错过了什么或不应该是我的工作， ve描述了

Did I miss something here or isn't it supposed to work as I've described?

编辑，并且运行正常，所以这似乎是google chrome的一个问题。

Edit tested with firefox, and works fine, so this seems to be an issue with google chrome. Not tried with later versions of IE or Opera.

推荐答案

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

Your CSS looks correct, but browser support, of course, varies, and where there is support, there will be bugs. Javascript would be much more reliable.

这篇关于一般兄弟组合器（〜），不更新DOM更改，按预期工作？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！