javascript - 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]没有下划线。但碰巧上标也有下划线。我在这里想念什么？

score 6 · Accepted Answer

如果您考虑一下，sup则没有下划线。但span仍然是。由于sup位于内部span，因此您会看到看起来是sup' 下划线的下划线。

您会看到id1css 确实具有优先权，但您仍然会看到下划线，即span.

要解决它，请在sup外部span：

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

score 2 · Accepted Answer

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

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

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

score 1 · Accepted Answer

用与背景相同的颜色来强调 sup 怎么样？跨度将带有下划线，而 sup 下划线将覆盖它。

score 1 · Accepted Answer

1

于 2011-08-19T12:18:55.563 回答

score 1 · Accepted Answer

诀窍是添加

display: inline-block;

到您希望不具有相同文本装饰的对象，如下所示：

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

score 0 · Accepted Answer

事实证明 text-decoration 是特殊的，（而且特别烦人）因为它不像其他属性那样级联。

6 回答 6