Question

可能重复：
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属性则不能。

是吗？是这样吗？如果是的话，我怎么知道哪些可以被覆盖并且不能被覆盖？

Answer 1

来自text-decoration spec：

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

The answer in the linked question进一步引用（我不再在规范中找到此文字）：

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

另一个引用，CSS3似乎引入了text-decoration-skip，旨在通过在后代（在您的情况下，<span>）应用属性来解决这个问题：

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

Answer 2

正如Pekka所说，这是我的回答：

设置文本修饰值时，文本修饰会发生变化。问题是，由于父元素（锚点）围绕跨度，看起来跨度有下划线。

如果你将span的text-decoration设置为true，这是显而易见的，因为它使得下划线蓝色为JUST的跨度。

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

2 个答案: