text-decoration:none不删除文本修饰

Question

请考虑以下代码 HTML:

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

CSS:

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

现在我希望Home有一个下划线,而上标[2]没有下划线.但恰好上标也得到了下划线.我在这里失踪了什么？

http://jsfiddle.net/sasidhar/DTpEa/

Answer 1

如果你仔细想想,那就sup没有下划线了.但span仍然是.由于sup它在里面span,你看到下划线似乎是sup下划线.

考虑一下这个演示:http://jsfiddle.net/mrchief/DTpEa/24/

你会看到id1css确实优先,但你仍然可以看到下划线span.

要解决它,请在sup外面span:

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