CSS - Sibling selector not working in android?

2020-03-23 12:00发布

问题:

This code works fine in Chrome on desktop, but not android stock browser:

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
input:checked ~ span {color:red;}
</style>
</head>
<body>
<label>
<input type="checkbox" />
<span>First item</span>
</label>
</body>
</html>

Basically when you click hte check mark, the span tag text should turn red. It's not turning red on my Galaxy Note with android 4.0.

What's wrong with my code?

回答1:

http://quirksmode.org/css/selectors/mobile.html

The sibling selector is supported

the :checked pseudo-class is not