text-decoration:none 不删除文本装饰答案

【问题标题】：text-decoration:none doesn't remove text decorationtext-decoration:none 不删除文本装饰
【发布时间】：2011-08-18 20:10:21
【问题描述】：

考虑以下代码 HTML：

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

CSS：

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

现在我希望Home 有下划线，而上标[2] 没有下划线。但碰巧上标也有下划线。我在这里错过了什么？？

【问题讨论】：

【解决方案1】：

如果你仔细想想，sup 没有下划线。但span 仍然是。由于sup 在span 内，您会看到下划线似乎是sup 的下划线。

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

要解决它，请将sup 放在span 之外：

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

【讨论】：

我需要解决这个问题。我不介意它的 webkit 是否特定
我需要sup 保留在span 内，同时没有下划线。可能吗？
你的意思是你不能重新排列标记？恐怕你需要一个基于 JS 的解决方案。
我也可以使用 js 解决方案。 span（由JS更新）的类有太多混乱。所以我宁愿保留原样。
你在使用 jQuery 吗？如果是，请运行：$('#id1').detach().insertAfter('span.c1');。如果您需要更通用的解决方案（不依赖于 id），请告诉我。 jsfiddle.net/mrchief/DTpEa/25

【解决方案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;
}

【讨论】：

是吗？跨度元素不能包含更多元素吗？我的实际代码具有更复杂的样式，并由 js 处理以添加和删除不同的类，所以我对从 span 中删除上标不感兴趣
@sasidhar 文本以块形式处理，样式忽略子元素（大部分情况下）。 CSS3 的text-decoration-skip 旨在解决这个问题，但还没有真正实现。

【解决方案3】：

用与你的背景相同的颜色在 sup 下划线怎么样？ span 将带有下划线，sup 下划线将覆盖它。

【讨论】：

【解决方案4】：

http://jsfiddle.net/sasidhar/eYXhx/1/

【讨论】：

【解决方案5】：

诀窍是添加

display: inline-block;

到你不希望有相同文本装饰的对象，如下：

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

【讨论】：

【解决方案6】：

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

【讨论】：