html - Why does the general-sibling combinator allow toggling pseudo-element's content, but not the adjacent-sibling? -

In this question, "I am using a input , Type = "checkbox" to toggle the display of an element.

This is the HTML of the demo posted in that reply:

 < Code> & lt; Input type = "checkbox" id = "switch" /> gt; & gt; & lt; h2 & gt; This will be the 'navigation' element. & Lt; / h2 & gt; For Lt; / ne & gt; label = "switch" & gt; toggle navigation & lt; / label & gt;   
 and CSS (sort for short With transition):  
  #switch {display: none;} #switch + nav {height: 0; hidden collapse; / * modified * /} # swiss: checked + NAV (height: 4 AM; color: # 000; background color: # FAA; / * after the change * label} {cursor: indicator}}   
.  
 Once I had posted the answer, I did that  also   after modifying the text of the  label  for the following selectors ('Navigation' ) To trigger the state-change of that checkbox The labels to use :  
  label {display: inline-block; Cursor: indicator; } #switch + nav + label: before {content: 'show'; } # Swiss: checked + ava + label :: first {content: 'Hide'; }   
.  
 It was not working, at that time when the selector matched, while  Input  was in its arbitrary state (and  label  shown  Show Navigation ), when the status of  Input  has changed to the selector  failed  match, note that the change is still on the  nav  element Were impressed, and the original matching selector indicates that the next-season co-ordinator basically matches. The above link shows a simplified demo of selectors in non-working (Chrome 27 / Windows XP).  
 To minimize the selector-chain, it happens to me to try the common-brother coordinator. As a result, the following CSS (with a reflection for short):  
  #switch: checked + nav {background-color: #ffa; } Labels {Display: Inline-Block; Cursor: indicator; } #switch ~ label :: before {content: 'show'; } #Soft: Checked ~ label :: first {content: 'Hide'; }   
.  
 To my extent, this work changed ( content  to  label  in response) changed to  input  In stage)  
 So, the question: Why do common-brothers allow associate to update later brother-in-law, while the next-child mating (who matches the elements and structure of the DOM) does not?  
 Next, it  does  work in Firefox (21, on Windows XP); So I think the question has changed slightly to include: Is this a bug in Chrome / WebKit, or expected behavior?  
 And, even  Forward , it seems that this is a bug in Chrome (thanks @ ballclock), to some extent a ridiculous non-working Fixes the demo (though other, perhaps better, options exist as Scott's response):  
  body {- WebKit-Animation: Bugfix Infinity 1S; } @ -webkit-keyframes bugfix {to {padding: 0; } To {padding: 0; }} # Swiss {} # Swiss + NAV {-Mozy-Transition: All 1S Linear; -MMS transition: all 1s linear; -O-Infection: All 1s linear; Webkit-Infection: all 1s linear; Transition: All 1s linear; } # Swiss: check + avu (background-color: #fa-moz-transition: all 1s linear; -mms transition: all 1s linear; -o-transition: all 1s linear; -webkit-infection: all 1s linear; infections : All 1s linear;} label {display: inline-block; cursor: indicator;} before #switch + nav + label: {content: 'show';} # swiss: checked + ava + label :: first {Content: 'Hide';}   
.  Note:  The reason for this is that I am updating it with 'fix', reply to it Instead of posting in the form, only because the question  was not  "how can I fix it?" But (basically) "Why does not this work?"   
 
 
 This is a long time running bug webkit browsing is related to the use of some dynamic pseudo-squares, with the next-generation couples It happens, is it that you are implementing the styles of brother-sister elements or the proxy element of that brother element.  
 I do not know that no one has filed a bug report yet, but it has been seen instead of on the site:  
 
      
 It was also surprisingly even that Chrome was on the issue with common brother associator, but you note that it works in your scenario:  
 
   
 So either it was fixed, or something else went / triggered.