javascript - 文字装饰 :none doesn't remove text decoration

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/

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

要解决它，请在 span 之外添加 sup:

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