根据 radio:checked 属性 更改 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;
    }