Le chaînage CSS d'un frère ou d'une sœur adjacent(e) avec :checked ne fonctionne pas

Question

Pourquoi la cette fonctionne pour moi dans Chrome lorsque je clique sur le 2ème bouton radio ? Le paragraphe 2 reste en surbrillance et le paragraphe 4 n'est pas mis en surbrillance. S'agit-il d'un bug dans Chrome ?
HTML :

<input type="radio" name="toggler" checked />
<p>Paragraph one</p>
<p>Paragraph two</p>
<input type="radio" name="toggler" />
<p>Paragraph three</p>
<p>Paragraph four</p>

CSS :

:checked + p + p {
  color: red;
}

Answer 1

Je pense que vous avez le même problème que celui décrit ici :

Bogue de Webkit avec `:hover` et plusieurs sélecteurs de type adjacent

Pour contourner le problème, il suffit d'ajouter :checked ~ p {} (intentionnellement vide) et cela fonctionne :

http://jsbin.com/abeniy/7/edit

Answer 2

C'est un comportement étrange. Je pense que cela a quelque chose à voir avec le <p> étant des frères de l'élément d'entrée, et non des enfants. J'ai trouvé une petite astuce pour contourner le problème. Il suffit d'entourer chaque input y p dans un bloc div . Utilisez ensuite la fonction ~ sélecteur...

le css :

input:checked ~ p + p {
        color: red;
      }

le html :

<div>
<input type="radio" name="accordion" checked />
<p>Paragraph one</p>
    <p>Paragraph two</p>
</div>
<div>
    <input type="radio" name="accordion" />
    <p>Paragraph three</p>
<p>Paragraph four</p>
</div>

la démo :

http://codepen.io/lukeocom/pen/CABes

UPDATE :

Je viens de remarquer que si vous ajoutez ce css à votre html d'origine, cela fonctionne aussi. Je ne sais pas trop pourquoi, car le style du second sélecteur est vide...

input:checked + p + p {
        color: red;
      }

p:nth-child(2){}