text-decoration:none doesn't remove text decoration

问题

Consider the following code HTML:

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

CSS:

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

Now I expected Home to have an underline while the superscript [2] doesn't have the underline. But it so happens that the superscript is also getting the underline. What am i missing here??

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

回答1:

If you think about it, the sup isn't underlined. but the span still is. Since the sup is inside the span, you see the underline which appears to be sup's underline.

Consider this demo: http://jsfiddle.net/mrchief/DTpEa/24/

You'll see that the id1 css does take precedence, but you still see the underline which is that of the span.

To solve it, have the sup outside of the span:

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

回答2:

Here is a correct variant http://jsfiddle.net/rTUDN/

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

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

回答3:

How about underlining the sup in the same color as your background? The span would be underlined and the sup underlining would overlay it.

回答4:

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

回答5:

The trick is to add

display: inline-block;

to the object you want to not have the same text-decoration, as below:

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

回答6:

It turns out that text-decoration is special, (and especially annoying) in that it doesn't cascade like other properties.

See: How do I get this CSS text-decoration override to work?

来源：https://stackoverflow.com/questions/7113520/text-decorationnone-doesnt-remove-text-decoration

标签

javascript

jquery

css

css-specificity