CSS文本装饰属性不能被子元素覆盖[重复]答案

【问题标题】：CSS text-decoration property cannot be overridden by child element [duplicate]CSS文本装饰属性不能被子元素覆盖[重复]
【发布时间】：2011-05-27 17:58:50
【问题描述】：

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

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

【问题讨论】：

如果您在切换跨度类的下划线时仔细观察，您会看到下划线发生了变化。只是Anchor标签下划线没有停。
@Stefan 为什么不给出答案 - 这就是解决方案：父元素是被下划线的元素。必须终止父元素才能停止下划线。我认为没有“强制无下划线”样式
@Stefan 我不明白你的意思。
@Šime 这是一个使用overline 的插图，这可能会使jsfiddle.net/5t9sV/4 更清晰
@Pekka 啊哈我明白了。下划线“属于” ANCHOR 元素，因此 SPAN 元素无法操纵该下划线（因为它不是他的）

标签： css

【解决方案1】：

来自text-decoration spec：

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

The answer in the linked question 更多引号（但是我在规范中找不到此文本）：

内联框上的文本装饰被绘制在整个元素上，跨越任何后代元素，而不注意它们的存在。

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

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

【讨论】：

是的，我现在明白了。我认为 SPAN 元素下方的线属于它，但事实并非如此。 ANCHOR 元素“拥有”整行，这意味着 SPAN 元素无法对其进行操作。
@Šime Vidas：是的，这也是为什么下划线仍然是蓝色的原因。
请参见this test，表明祖先的text-decoration 始终与子的任何text-decoration 一起应用和累积。遗憾的是，将孩子的值设置为 none 并不会覆盖某些“继承”值，而是将零添加到现有数字。
我认为text-decoration-skip: all 可以做到这一点，但它已从草案中删除。如果我理解正确，text-decoration-skip 的当前值不能阻止装饰传播到后代（原子内联除外）。

【解决方案2】：

根据 Pekka 的建议，这是我的答案：

当您设置 text-decoration 值时，文本装饰确实会发生变化。问题在于，由于父元素（锚点）围绕着跨度，看起来跨度似乎被加了下划线。

如果您将 span 的 text-decoration 设置为 true，这一点会很明显，因为它会将下划线变为蓝色，表示 JUST the span。

【讨论】：

我还以为是这样的；但是，如this test 所示，来自祖先的 text-decoration 属性始终适用于嵌套的子级，以及它们指定的任何内容。