Changing css depending on radio:checked property n

问题:

Why is this not working in safari but works in chrome and firefox?

http://jsfiddle.net/1ze83qcc/

Just click on the radio buttons and if you click login it should show the div.

.form-list .login-mobile{
	display:none;
}
.form-list #login-drop:checked + label + .login-mobile{
	display:block;
}

<ul class="form-list">
<li style="margin:5px 0;padding:0;">
<input id="login-drop" type="radio" name="checkout_method" selected="false">
<label for="login-drop">Login</label>
<div class="login-mobile">
    hey you
</div>
    
</li>
<li style="margin:5px 0;padding:0;">
<input id="login:register" type="radio" checked="checked" value="register" name="checkout_method" selected="false">
<label for="login:register">Register</label>
</li>
<li style="margin:5px 0;padding:0;">
<input id="login:guest" type="radio" value="guest" name="checkout_method" selected="true">
<label for="login:guest">Checkout as Guest</label>
</li>
</ul>

回答1:

Ok, safari seems to have a bug regarding adjacent sibling selectors: element + element + element{}.

So I've used the sibling combinator ~

.form-list #login-drop:checked ~ .login-mobile{
    display:block;
}

and it worked.

回答2:

please add :nth-child(n) to label

.form-list #login-drop:checked + label:nth-child(n) + .login-mobile{
    display:block;
    }