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

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/

Vegeta

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

小子

楼上正解

a:hover { color: yellow;text-decoration: underline; }

这么一改就看的很清楚了。

你这个效果蛮有趣的，我简单实现了下：

这个好像是你想要的效果吧

Old_Cai