通用同级组合器 (~)，不更新 DOM 更改，按预期工作？

Question

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?).

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.

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, ie either hides the submit button if no checkboxes were checked, or displays it if a checkbox was ticked.

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.

Example: http://jsfiddle.net/niklasvh/nn4Qw/

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

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.

Answer 1

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.

Answer 2

Webkit had problems with siblings and andjacents when combined with pseudoclases. I had some problems with:hover, it's possible that the same thing happens with:checked. It should be fixed in recent nightly chromium builds. If so this bug will some time end in stable chrome version.