6

我span在td. td有一个带有 CSS 的类来设置to text-decoration，underline而span设置text-decorationto none。我希望里面的文字span没有下划线，但由于某种原因它是。为什么？

.u {
    text-decoration: underline;
}

.no-u {
    text-decoration: none !important;
}
<table>
    <tr>
        <td class="u">
            <span class="no-u" style="text-decoration: none !important;">My Text</span>
        </td>
    </tr>
</table>

4

2 回答 2

7

无法删除后代的带下划线样式。

http://www.w3.org/TR/CSS21/text.html#lining-striking-props

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

于 2013-08-28T16:40:08.753 回答
0

根据 CSS2 规范，http ://www.w3.org/TR/CSS21/text.html#lining-striking-props ：

对于建立内联格式化上下文的块容器，装饰被传播到一个匿名内联元素，该元素包装了块容器的所有流入内联级子项。

这意味着任何文本和任何像<b>,<em>和的内联元素<span>都被包裹在一个匿名内联框中，在该框上应用了文本装饰。

此外，在子内联元素的情况下，您可以应用另一个文本装饰，允许您在一段文本上同时出现下划线和上划线。在这种情况下，下划线绘制在一个匿名行内框上，上划线绘制在第二个（嵌套的）匿名行内框上。

在此示例中，td元素充当块容器。

但是，这不适用于inline-blocks.

参见演示：http: //jsfiddle.net/audetwebdesign/MSUHx/

于 2013-08-28T17:02:18.780 回答