您好,匿名用户
随意问技术百科期待您的加入

如何避免 a 标签的 text-decoration 属性影响该节点下的其他标签

0 投票

html 代码:

​<a href="#">hello<span>world</span></a>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

我希望指针移到链接上的时候,只有 hello 具备下划线,于是这么写 CSS:

​a { text-decoration: none; }
a:hover { text-decoration: underline; }

a span { color: red; }
a:hover span { color: green; text-decoration: none; }

但是,运行的结果并没有预想的那样,运行的结果显示 span 可以拥有自己的 color 属性,但 text-decoration 却从 a 那儿继承了,导致 span 标签也同时出现了下划线,这该如何解释?
演示地址:http://jsfiddle.net/J9xjG/

用户头像 提问 2012年 12月1日 @ 阿尔托莉雅 下士 (587 威望)
分享到:

1个回答

0 投票
 
最佳答案

span标签没有下划线,那个下划线是a标签的,因为你的span是写在a标签里面的

用户头像 回复 2012年 12月1日 @ Saber 中士 (1,234 威望)
选中 2012年 12月1日 @阿尔托莉雅
提一个问题:

相关问题

0 投票
1 回复 26 阅读
用户头像 提问 2012年 12月1日 @ Warwick 上等兵 (286 威望)
0 投票
0 回复 20 阅读
用户头像 提问 2013年 12月20日 @ Riven 上等兵 (334 威望)
0 投票
1 回复 33 阅读
用户头像 提问 2012年 12月1日 @ Lux 上等兵 (267 威望)
0 投票
1 回复 31 阅读
用户头像 提问 2012年 12月1日 @ Nunu 上等兵 (350 威望)
0 投票
1 回复 31 阅读
用户头像 提问 2012年 12月1日 @ Maokai 上等兵 (292 威望)

欢迎来到随意问技术百科, 这是一个面向专业开发者的IT问答网站,提供途径助开发者查找IT技术方案,解决程序bug和网站运维难题等。
温馨提示:本网站禁止用户发布与IT技术无关的、粗浅的、毫无意义的或者违法国家法规的等不合理内容,谢谢支持。

欢迎访问随意问技术百科,为了给您提供更好的服务,请及时反馈您的意见。
...