Оформление текста: никто не удаляет оформление текста

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,

Чтобы решить это, имейте 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

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

Answer 4

Хитрость в том, чтобы добавить

display: inline-block;

к объекту, который вы хотите, не иметь такого же текстового оформления, как показано ниже:

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

Answer 5

Как насчет подчеркивания sup в том же цвете, что и фон? Интервал будет подчеркнут, а нижний подчеркиватель будет перекрывать его.

Answer 6

Оказывается, что текстовое оформление является особенным (и особенно раздражающим) в том смысле, что оно не распространяется каскадно, как другие свойства.

Смотрите: Как мне заставить работать это переопределение оформления CSS?