根据无线电改变css：已检查的属性不适用于safari

Question

为什么这不适用于safari但适用于chrome和firefox？

http://jsfiddle.net/1ze83qcc/

只需单击单选按钮，如果单击登录，则应显示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>

Answer 1

好的，safari似乎有关于相邻兄弟选择器的错误：element + element + element{}。

所以我使用了兄弟组合器~

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

并且有效。

Answer 2

请添加：nth-​​child（n）标签

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