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。

このデモを検討してください: http://jsfiddle.net/mrchief/DTpEa/24/

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

1

于 2011-08-19T12:18:55.563 に答える

score 1 · Accepted Answer

背景と同じ色で sup に下線を引いてみませんか? スパンに下線が引かれ、sup の下線がその上に表示されます。

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