子元素不能覆盖CSS text-decoration属性

Question

可能重复:
如何使CSS文本修饰覆盖工作？

看看这个简单的例子:

<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元素覆盖color和font-family它的祖先定位元素的属性值.但是,由于text-decoration某种原因,该物业不会被覆盖.

我假设一些CSS属性可以被祖先元素覆盖,而其他一些CSS属性则不能.

是这样吗？如果是,我怎么知道哪些可以被覆盖？

Answer 1

从text-decoration规格:

后代元素的'text-decoration'属性不会对祖先的装饰产生任何影响.

链接问题中的答案进一步引用(我不再在规范中找到此文本):

内联框中的文本装饰在整个元素上绘制,遍历任何后代元素,而不关注它们的存在.

另一个引用,CSS3似乎介绍text-decoration-skip,旨在通过在后代(在您的情况下<span>)应用属性来解决这个问题:

此属性指定元素内容的哪些部分必须跳过影响元素的任何文本修饰.它控制元素绘制的所有文本装饰线以及其祖先绘制的任何文本装饰线.