Question

请考虑以下代码的 HTML：

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

CSS：

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

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

Answer 1

如果您考虑一下，sup没有加下划线。但span仍然存在。由于sup位于span内，因此您会看到下划线似乎是sup的下划线。

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

要解决此问题，请在sup之外设置span：

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

Answer 2

这是一个正确的变体http://jsfiddle.net/rTUDN/

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

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

Answer 3

如何用与背景相同的颜色加下sup？跨度将加下划线，并且下划线将覆盖它。

Answer 4

Answer 5

诀窍是添加

display: inline-block;

到您想要不具有相同文本修饰的对象，如下所示：

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

Answer 6

事实证明，文本修饰是特殊的，（尤其令人讨厌）因为它不像其他属性那样级联。