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

Question

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/

Answer 1

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