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/