CSS テキスト装飾の継承は子要素でどのように機能しますか?

CSS text-decoration プロパティのオーバーライドの問題

HTML および CSS では、text-decoration プロパティは、次のような装飾を追加または削除するために使用されます。テキスト要素に下線や取り消し線として使用できます。ただし、子要素に独自の text-decoration プロパティが含まれる場合、子プロパティが親から継承したプロパティをオーバーライドできるかどうかという問題が発生します。

次の CSS 例を考えてみましょう:

a {
    text-decoration: underline;
}

span {
    text-decoration: none;
}

この場合、要素は から text-decoration プロパティを継承しません。親を作成し、代わりに独自のテキスト装飾を適用します。価値。 text-decoration プロパティが親要素と子の両方の要素に指定されているため、この結果は予期されています。

CSS の text-decoration 仕様によると、子要素の text-decoration プロパティは要素に影響を与えることはできません。先祖の飾り。これは、子の値に関係なく、親要素のテキスト装飾が常に適用されることを意味します。

リンクされた質問には、仕様からの詳細情報も提供されており、「インライン ボックスのテキスト装飾は要素全体にわたって描画されます」と述べられています。 、子孫要素の存在にまったく注意を払うことなく、すべての子孫要素を横断します。」これは、親のテキスト装飾が、子要素を含むインライン ボックス全体に常に適用されることを意味します。

新しい CSS バージョン (2.1 以降) では、この問題に対処するために text-decoration-skip プロパティが導入されました。この問題。子要素に text-decoration-skip:skip を設定すると、親の装飾が子のコンテンツをスキップするように強制できます。

結論として、text-decoration プロパティは子要素によってオーバーライドできません。仕様のデザイン。要素の特定の部分のテキスト装飾を制御するには、新しい CSS バージョンで text-decoration-skip プロパティを使用できます。

以上がCSS テキスト装飾の継承は子要素でどのように機能しますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。