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

zhoupc88 2016-07-24 12:19:24
一开始写成:
input[type="radio"]:checked {color: red;}

不奏效。想到 radio 和 label 其实是两个不同元素,难怪对 radio 设置样式会没反应。于是改成:
input[type="radio"]:checked+label {color: red;}

然而没想到还是没任何反应。
那么想达到这样的目的,该怎么办呢?
...全文
1885 13 打赏 收藏 转发到动态 举报
写回复
用AI写文章
13 条回复
切换为时间正序
请发表友善的回复…
发表回复
zhoupc88 2016-07-25
  • 打赏
  • 举报
回复
引用 12 楼 jslang 的回复:
引入 jQueryMobile之后更简单了
看到它自动加的ui-radio-on 类名了没有
#xxx .ui-radio-on {color: red;}

请受小弟一拜!

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

谢谢!!
天际的海浪 2016-07-25
  • 打赏
  • 举报
回复
引入 jQueryMobile之后更简单了 看到它自动加的ui-radio-on 类名了没有 #xxx .ui-radio-on {color: red;}
zhoupc88 2016-07-24
  • 打赏
  • 举报
回复
引用 10 楼 jslang 的回复:
input 和 label 的顺序被颠倒,你那个 +号选择器就不对了
学到太多东西了,感激不尽! 没想到还能这样玩。两个id选择器、提高样式优先级、调试方法,等等,这些我之前想都没想到过。也没有想到 jQueryMobile 库竟然对 DOM 结构都做了如此大的改变,可谓翻天覆地。 既然 label 都被移到 input 的前面去了,刚才琢磨了半天,都没有想出解决办法来(先不管优先级对不对,先得指到正确的目标才行吧)。这才感到 CSS 选择器的“局限”和掣肘:只能往下级去指定,没办法指定上级或同级元素。看来要想纯依赖 CSS 来解决这个问题暂时是没辙了。
天际的海浪 2016-07-24
  • 打赏
  • 举报
回复
input 和 label 的顺序被颠倒,你那个 +号选择器就不对了
天际的海浪 2016-07-24
  • 打赏
  • 举报
回复


看到了吧
引入 jQueryMobile 之后,它把页面上原来的html元素都修改了。
天际的海浪 2016-07-24
  • 打赏
  • 举报
回复
那用f12调试工具调试下看看最终应用的color样式是哪个
zhoupc88 2016-07-24
  • 打赏
  • 举报
回复
引用 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>
JPF1024 2016-07-24
  • 打赏
  • 举报
回复
引用 4 楼 zhoupc88 的回复:
[quote=引用 2 楼 jslang 的回复:] input[type="radio"]:checked+label {color: red;}这个可以的
谢谢! 再验证一下,发现是套用了 jQueryMobile 样式的原因。删去对 jQueryMobile 库的引用,还原成 HTML 本身的元素样式,则选中变红的效果就出来了。(咦?奇怪,我在发此帖之前也怀疑到这个原因,并做过删去 jQueryMobile 库引用的试验,怎么记得当时还是没出现变红效果的?所以百思不得其解才发此帖的。现在再试又可以了?看来非得经过大神确认一下才行?) 那么现在的问题便是:如果在套用了 jQueryMobile 样式的情况下(我还是挺喜欢其样式风格的,HTML原生的裸样式太过简陋了些,而且对于移动端平台更不合适),要想实现选中的按钮变红色的效果,又该怎么办呢?[/quote] 可能是样式冲突了,可以使用id选择器,或者使用js进行控制。
天际的海浪 2016-07-24
  • 打赏
  • 举报
回复
那可能是这个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>
zhoupc88 2016-07-24
  • 打赏
  • 举报
回复
引用 2 楼 jslang 的回复:
input[type="radio"]:checked+label {color: red;}这个可以的
谢谢! 再验证一下,发现是套用了 jQueryMobile 样式的原因。删去对 jQueryMobile 库的引用,还原成 HTML 本身的元素样式,则选中变红的效果就出来了。(咦?奇怪,我在发此帖之前也怀疑到这个原因,并做过删去 jQueryMobile 库引用的试验,怎么记得当时还是没出现变红效果的?所以百思不得其解才发此帖的。现在再试又可以了?看来非得经过大神确认一下才行?) 那么现在的问题便是:如果在套用了 jQueryMobile 样式的情况下(我还是挺喜欢其样式风格的,HTML原生的裸样式太过简陋了些,而且对于移动端平台更不合适),要想实现选中的按钮变红色的效果,又该怎么办呢?
zhoupc88 2016-07-24
  • 打赏
  • 举报
回复
引用 1 楼 qq_34285369 的回复:
应该有一个触发事件,当单选框被选中之后改变其样式
不用 JavaScript 的,请参见 CSS 的状态伪类选择器。
天际的海浪 2016-07-24
  • 打赏
  • 举报
回复
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 />
qq_34285369 2016-07-24
  • 打赏
  • 举报
回复
应该有一个触发事件,当单选框被选中之后改变其样式

61,110

社区成员

发帖
与我相关
我的任务
社区描述
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
社区管理员
  • HTML(CSS)社区
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧