子元素不能覆盖CSS文本修饰属性

Question

看看这个简单的例子：

<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>）应用属性来解决这个问题：此属性指定元素内容的哪些部分必须跳过影响元素的任何文本修饰。它控制元素绘制的所有文本装饰线以及其祖先绘制的任何文本装饰线。

Answer 2

这是我的答案：设置文本修饰值时，文本修饰会更改。问题是，由于父元素（锚点）围绕跨度，看起来跨度有下划线。如果将span的text-decoration设置为true，则会显而易见，因为它使得下划线为蓝色，即JUST的跨度。