Question

span内有td个标记。 td有一个CSS类可以将text-decoration设置为underline，span会将text-decoration设置为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>

Answer 1

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

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

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

Answer 2

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

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

这意味着任何文本和任何内联元素（如<b>，<em>和<span>都包含在应用文本修饰的匿名内联框中。

此外，对于子内联元素，您可以应用另一个文本修饰，使您可以在一段文本上显示下划线和上划线。在这种情况下，在一个匿名内联框中绘制下划线，并在第二个（嵌套）匿名内联框上绘制上线。

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

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

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

在td内的span不会覆盖td样式

2 个答案: