Question

这是我的HTML

<div class="test" onclick="this.querySelector('.rad').checked=true;">
   <input type="radio" class="rad" name="rad" />
   <div>hello</div>
</div>
<div class="test">
   <input type="radio" class="rad" name="rad" />
   <div>hello1</div>
</div>

CSS

 .test input:checked ~ div {
    color: #3498DB !important;
 }

这在桌面浏览器和用户代理中运行良好，但是当我在Android设备上测试时，它无法正常工作。 Android 4.0+中经过测试的版本。有人请告诉我如何解决这个问题？

注意：使用onclick而不是ontouchend发布代码here

Answer 1

不确定，因为我无法测试它，但如果你想，+相邻选择器做同样的事情

.test input:checked + div {
    color: #3498DB !important;
}

就您的示例而言，我没有看到使用~的任何正当理由，因为您没有选择所有div元素后跟input标记，它只是一个在你的情况下。

Demo

另外，我想告诉您，如果您还使用attr=val选择器指定属性值，那就更好了

.test input[type="radio"]:checked + div {
    color: #3498DB !important;
}

Answer 2

Android设备不支持:checked伪类。

看看这里：http://quirksmode.org/css/selectors/mobile.html

你可以通过伪造body元素上的动画来克服Webkit的伪类+一般/相邻兄弟选择器错误：检查这个普遍问题：Webkit bug with `:hover` and multiple adjacent-sibling selectors

这是一个黑客，但它是一个有效的解决方案。

〜选择器无法在Android中运行

2 个答案: