☰

CSS テキスト装飾プロパティは子要素によって上書きできません [重複] 質問する

tag-icon • tag-icon css
CSS テキスト装飾プロパティは子要素によって上書きできません [重複] 質問する

重複の可能性あり:
この CSS テキスト装飾オーバーライドを機能させるにはどうすればよいですか?

次の簡単な例を見てみましょう。

<a href="#"> A <span>red</span> anchor </a>

a {
    color:blue;
    font-family:Times New Roman;
    text-decoration:underline; 
}

span {
    color:red;
    font-family:Arial;
    text-decoration:none;   
}

ライブデモ: http://jsfiddle.net/5t9sV/

JSfiddle のデモでわかるように、SPAN 要素は祖先の ANCHOR 要素のcolorおよびプロパティ値をオーバーライドします。ただし、何らかの理由でプロパティはオーバーライドされません。font-familytext-decoration

一部の CSS プロパティは祖先要素によって上書きできますが、他の一部の CSS プロパティは上書きできないと想定しています。

そうなのですか? もしそうなら、どれが上書き可能でどれが不可能なのかをどうやって知ることができますか?

ベストアンサー1

からtext-decorationスペック:

子孫要素の「text-decoration」プロパティは、祖先要素の装飾には影響を与えません。

リンク先の質問の回答さらに引用します (ただし、このテキストは仕様ではもう見つかりません):

インライン ボックス上のテキスト装飾は要素全体に描画され、子孫要素の存在を考慮せずに子孫要素全体に描画されます。

そしてもう一つの引用ですが、CSS3はtext-decoration-skipは、子孫（この場合は<span>）に プロパティを適用することで、この問題に対処することを目的としています。

このプロパティは、要素に影響を与えるテキスト装飾が要素のコンテンツのどの部分をスキップする必要があるかを指定します。要素によって描画されるすべてのテキスト装飾線と、その祖先によって描画されるすべてのテキスト装飾線を制御します。

おすすめ記事