Possible Duplicate:
How do I get this CSS text-decoration override to work?
看看这个简单的例子:
<a href="#"> A <span>red</span> anchor </a>
a {
color:blue;
font-family:Times New Roman;
text-decoration:underline;
}
span {
color:red;
font-family:Arial;
text-decoration:none;
}
现场演示: http://jsfiddle.net/5t9sV/
正如您在 JSfiddle 上的演示中看到的那样，SPAN 元素覆盖了其祖先 ANCHOR 元素的 color 和 font-family 属性值。但是，由于某些原因，text-decoration 属性不会被覆盖。
我假设一些 CSS 属性可以被祖先元素覆盖，而另一些 CSS 属性则不能。
是这样吗？
如果是，我怎么知道哪些可以被覆盖，哪些不能被覆盖？
来自 text-decoration spec :
The 'text-decoration' property on descendant elements cannot have any effect on the decoration of the ancestor.
The answer in the linked question进一步引用(但是我在规范中找不到这段文字了):
Text decorations on inline boxes are drawn across the entire element, going across any descendant elements without paying any attention to their presence.
再引用一句，CSS3似乎引入了 text-decoration-skip ，旨在通过将属性应用于后代(在您的情况下为 <span> )来解决此问题:
This property specifies what parts of the element's content any text decoration affecting the element must skip over. It controls all text decoration lines drawn by the element and also any text decoration lines drawn by its ancestors.