text-decoration：none不会删除文本装饰 [英] text-decoration:none doesn't remove text decoration

问题描述

请考虑以下代码
HTML：

< span class ='c1'> ; Home< sup id ='id1'> [2]< / sup>< / span>

CSS ：

.c1
{
    text-decoration:underline;
}
#id1
{
    text-decoration:none !important;
}

现在我预计首页具有下划线，而上标 [2] 没有下划线。但它发生，上标也得到了下划线。我在这里失踪了什么？

Now I expected Home to have an underline while the superscript [2] doesn't have the underline. But it so happens that the superscript is also getting the underline. What am i missing here??

http：// jsfiddle.net/sasidhar/DTpEa/

推荐答案

如果你考虑过， sup 未加下划线。但 span 仍然是。由于 sup 在 span 中，您看到的下划线似乎是 / code>的下划线。

If you think about it, the sup isn't underlined. but the span still is. Since the sup is inside the span, you see the underline which appears to be sup's underline.

考虑此演示： http://jsfiddle.net/mrchief/DTpEa/24/

您会看到 id1 css是优先的，但你仍然看到 span 的下划线。

You'll see that the id1 css does take precedence, but you still see the underline which is that of the span.

解决它，使外 span ：

<span class='c1'>Home</span><sup id='id1'>[2]</sup>

这篇关于text-decoration：none不会删除文本装饰的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！