Общий братский комбинатор (~), не обновляющийся при изменениях DOM, работающий как задумано

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.

Answer 1

Ваш CSS выглядит корректно, но поддержка браузера, конечно, меняется, и там, где есть поддержка , будут ошибки. Javascript будет гораздо надежнее.

Answer 2

У Webkit были проблемы с братьями и сестрами и людьми, которые сочетались с псевдоклазамиУ меня были некоторые проблемы с: hover, возможно, что то же самое происходит с: флажок.Это должно быть исправлено в последних ночных сборках хрома.Если это так, эта ошибка когда-нибудь закончится стабильной версией Chrome.