CSS テキスト装飾の継承はどのように機能するのでしょうか?また、CSS のオーバーライドが時々失敗するのはなぜですか?

テキスト装飾の継承について

CSS では、テキスト装飾プロパティはテキストに適用される装飾線のスタイルを制御します。ただし、font-weight などの他のテキスト関連スタイルとは異なり、text-decoration は明確に動作します。

継承された装飾のオーバーライドに関する問題

次の CSS コードを考えてみましょう。

ul > li {
    text-decoration: none;
}
ul > li.u {
    text-decoration: underline;
}
ul > li > ul > li {
    text-decoration: none;
}
ul > li > ul > li.u {
    text-decoration: underline;
}

このコードは、継承された装飾がネストされたリスト項目に適用されるのを防ぐことを目的としています。ただし、以下の HTML 構造では、予期しない結果が明らかになります。

<ul>
  <li>Should not be underlined</li>
  <li class="u">Should be underlined
    <ul>
      <li>Should not be underlined</li>
      <li class="u">Should be underlined</li>
    </ul>
  </li>
</ul>

説明

問題は、テキスト装飾が、テキスト装飾内のすべてのネストされた要素に適用されるという事実にあります。適用される要素。これは、ネストされた要素で継承された装飾をオーバーライドしようとしても、継承された装飾が引き続き適用されることを意味します。

CSS 2.1 仕様によれば、「インライン ボックスのテキスト装飾は要素全体にわたって描画されます」 、子孫要素には一切注意を払わずに横断します。 "

解決策

この問題に対処するには、別のアプローチが必要です。ネストされたセレクターに依存して継承された装飾をオーバーライドする代わりに、次のような代替テクニックを使用します。

• ::before または ::after 擬似要素を使用して装飾線を作成する
• text-decoration プロパティを動的に変更する JavaScript
• text-decoration プロパティを、依存せずに目的の要素に直接適用する継承

以上がCSS テキスト装飾の継承はどのように機能するのでしょうか?また、CSS のオーバーライドが時々失敗するのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。