〜选择器在Android中不起作用[重复]答案

【问题标题】：~ selector not working in Android [duplicate]〜选择器在Android中不起作用[重复]
【发布时间】：2014-03-29 05:13:55
【问题描述】：

这是我的 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

【问题讨论】：

stackoverflow.com/questions/15192674/…
@Mr.Alien 根据您的建议，我已经尝试过+，它在 Android 4+ 设备上运行良好。 @Fabrizio 该代码在 Android 4+ 设备上运行良好。我不确定 2 和 3 :)
@redV 取消删除我的答案，因为我不确定
@redV，与你的css无关，但如果你能给你的收音机一个id，你可以将输入和div包装在一个标签中，然后你就不需要使用js来检查单击包装器时的收音机：jsfiddle.net/6y7Jy
@Pete 这是一个有效的点。但要提一下，label for 将在单击时执行，默认情况下，单选按钮将在 300 毫秒延迟后被选中。所以，我更喜欢 ontouchend 而不是 label :) 但绝对是有效的。

标签： html css css-selectors

【解决方案1】：

不确定，因为我无法现场测试，但如果您愿意，+ 相邻选择器会做同样的事情

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

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

Demo

另外，想告诉你，如果你也使用attr=val选择器来指定属性值就好了

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

【讨论】：

将在几分钟内检查并更新。感谢您的回复。
根据mozillaandroid确实支持:checked伪类
反对票的任何 cmet？如果答案无效，我真的很想编辑我的答案
+1 好吧，这证明有时问一个重复的问题会有所帮助:)
@Mr_Green 但是这个页面创造了一个希望，它可以在实际设备中工作。在上一个问题的答案中说它不受支持，并且兄弟选择可能是 + 或 ~ :)。我很抱歉，我不知道它已经被问过了。

【解决方案2】：

Android 设备不支持 :checked 伪类。

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

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

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

【讨论】：