CSS `text-decoration: none;` がネストされた要素をオーバーライドしないのはなぜですか?

CSS テキスト装飾オーバーライドのトラブルシューティング

CSS コードがテキスト装飾プロパティをオーバーライドしないという懸念は、多くの人が直面する共通の課題です。プログラマー。この問題を詳しく調べて、解決策を見つけてみましょう。

問題を理解する鍵は、font-weight などの他のフォント関連のプロパティとは異なる text-decoration の動作にあります。 text-decoration を適用すると、その特殊性に関係なく、ネストされたすべての要素に影響します。これについては、W3C 仕様で説明されています。

Text decorations on inline boxes are drawn across the entire element, going across any descendant elements without paying any attention to their presence.

コード内の text-decoration: none;下線を防止するルールは、u クラスの li 要素に適用されます。ただし、テキストの装飾はネストされた要素にも影響を与えるため、u クラスのネストされた li 要素には下線が残ります。

この問題を解決するには、CSS の特異性とネストを組み合わせて使用​​できます。

ul > li {
    text-decoration: none;
}
ul > li.u {
    text-decoration: underline;
}
ul > li > ul > li {
    text-decoration: line-through; /* Apply a different line-through style */
}
ul > li > ul > li.u {
    text-decoration: underline;
}

このアプローチを使用すると、外側の li 要素に影響を与えることなく、ネストされた li 要素にラインスルー スタイルが適用されます。あるいは、継承プロパティを明示的に利用して、ネストされた要素のテキスト装飾を設定することもできます。

ul > li > ul {
    text-decoration: inherit;
}

CSS の問題をトラブルシューティングするときは、プロパティの動作と特異性ルールを理解すると、効果的なプロパティを見つけるのに役立ちます。解決策。

以上がCSS `text-decoration: none;` がネストされた要素をオーバーライドしないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。