想让选中的单选按钮变成红色，该怎么办？这样写为何不行：input[type="radio"]:checked+label {color: red;}

[zhoupc88]

一开始写成：

input[type="radio"]:checked {color: red;}

不奏效。想到 radio 和 label 其实是两个不同元素，难怪对 radio 设置样式会没反应。于是改成：

input[type="radio"]:checked+label {color: red;}

然而没想到还是没任何反应。
那么想达到这样的目的，该怎么办呢？

[qq_34285369]

应该有一个触发事件，当单选框被选中之后改变其样式

[天际的海浪]

input[type="radio"]:checked+label {color: red;}这个可以的

<style type="text/css">
input[type="radio"]:checked+label {color: red;}
</style>
<input type="radio" name="test" id="id1" checked="checked" /><label for="id1">111111111</label><br />
<input type="radio" name="test" id="id2" /><label for="id2">222222222</label><br />
<input type="radio" name="test" id="id3" /><label for="id3">333333333</label><br />

[zhoupc88]

引用 1 楼 qq_34285369 的回复:

应该有一个触发事件，当单选框被选中之后改变其样式

不用 JavaScript 的，请参见 CSS 的状态伪类选择器。

[zhoupc88]

引用 2 楼 jslang 的回复:

input[type="radio"]:checked+label {color: red;}这个可以的

谢谢！ 再验证一下，发现是套用了 jQueryMobile 样式的原因。删去对 jQueryMobile 库的引用，还原成 HTML 本身的元素样式，则选中变红的效果就出来了。（咦？奇怪，我在发此帖之前也怀疑到这个原因，并做过删去 jQueryMobile 库引用的试验，怎么记得当时还是没出现变红效果的？所以百思不得其解才发此帖的。现在再试又可以了？看来非得经过大神确认一下才行？） 那么现在的问题便是：如果在套用了 jQueryMobile 样式的情况下（我还是挺喜欢其样式风格的，HTML原生的裸样式太过简陋了些，而且对于移动端平台更不合适），要想实现选中的按钮变红色的效果，又该怎么办呢？

[天际的海浪]

那可能是这个css选择器的优先级不够高。 可以加两个id选择器，提高下优先级试试 <style type="text/css"> #xxx#xxx input[type="radio"]:checked+label {color: red;} </style> <div id="xxx"> <input type="radio" name="test" id="id1" checked="checked" /><label for="id1">111111111</label><br /> <input type="radio" name="test" id="id2" /><label for="id2">222222222</label><br /> <input type="radio" name="test" id="id3" /><label for="id3">333333333</label><br /> </div>

[student-ai]

引用 4 楼 zhoupc88 的回复:

[quote=引用 2 楼 jslang 的回复:] input[type="radio"]:checked+label {color: red;}这个可以的

谢谢！ 再验证一下，发现是套用了 jQueryMobile 样式的原因。删去对 jQueryMobile 库的引用，还原成 HTML 本身的元素样式，则选中变红的效果就出来了。（咦？奇怪，我在发此帖之前也怀疑到这个原因，并做过删去 jQueryMobile 库引用的试验，怎么记得当时还是没出现变红效果的？所以百思不得其解才发此帖的。现在再试又可以了？看来非得经过大神确认一下才行？） 那么现在的问题便是：如果在套用了 jQueryMobile 样式的情况下（我还是挺喜欢其样式风格的，HTML原生的裸样式太过简陋了些，而且对于移动端平台更不合适），要想实现选中的按钮变红色的效果，又该怎么办呢？[/quote] 可能是样式冲突了，可以使用id选择器，或者使用js进行控制。

[zhoupc88]

引用 5 楼 jslang 的回复:

那可能是这个css选择器的优先级不够高。 可以加两个id选择器，提高下优先级试试 <style type="text/css"> #xxx#xxx input[type="radio"]:checked+label {color: red;} </style>

连写两个#xxx是咋回事？还可以这样写的？ 试了一下，写一个#xxx或两个，都还是没有奏效。 我在HTML文件的 head 中引入 jQueryMobile 库的代码如下：

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

[天际的海浪]

那用f12调试工具调试下看看最终应用的color样式是哪个

[天际的海浪]

看到了吧
引入 jQueryMobile 之后，它把页面上原来的html元素都修改了。

[天际的海浪]

input 和 label 的顺序被颠倒，你那个 +号选择器就不对了

[zhoupc88]

引用 10 楼 jslang 的回复:

input 和 label 的顺序被颠倒，你那个 +号选择器就不对了

学到太多东西了，感激不尽！ 没想到还能这样玩。两个id选择器、提高样式优先级、调试方法，等等，这些我之前想都没想到过。也没有想到 jQueryMobile 库竟然对 DOM 结构都做了如此大的改变，可谓翻天覆地。 既然 label 都被移到 input 的前面去了，刚才琢磨了半天，都没有想出解决办法来（先不管优先级对不对，先得指到正确的目标才行吧）。这才感到 CSS 选择器的“局限”和掣肘：只能往下级去指定，没办法指定上级或同级元素。看来要想纯依赖 CSS 来解决这个问题暂时是没辙了。

[天际的海浪]

引入 jQueryMobile之后更简单了 看到它自动加的ui-radio-on 类名了没有 #xxx .ui-radio-on {color: red;}

[zhoupc88]

引用 12 楼 jslang 的回复:

引入 jQueryMobile之后更简单了
看到它自动加的ui-radio-on 类名了没有
#xxx .ui-radio-on {color: red;}

请受小弟一拜！

（试了下发现：前面的 #xxx id选择器不能省，省掉则效果还是出不来。看来就是优先级的原因了。）

谢谢！！