一般兄弟組合（〜），不更新DOM更改，按預期工作？

Question

我在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測試，並且工作正常，所以這似乎是谷歌瀏覽器的問題。未嘗試使用IE或Opera的更高版本。

Answer 1

您的CSS看起來是正確的，但瀏覽器支持當然會有所不同，並且支持時會出現錯誤。 Javascript會更可靠。

Answer 2

當與僞僞裝結合使用時，Webkit在兄弟姐妹和和角戀人身上存在問題。我遇到了一些問題：懸停，可能發生同樣的事情：檢查。它應該在最近的夜間鉻版本中修復。如果是這樣的話，這個bug在某些時候會以穩定的chrome版本結束。