CSS テキスト装飾の継承を効果的にオーバーライドするにはどうすればよいですか?

CSS テキスト装飾の継承を理解する

CSS では、テキスト装飾をオーバーライドするのが難しい場合があります。テキスト装飾スタイルを持つ親要素が適用されると、その装飾がすべての子要素に継承されます。これにより、特定の要素の装飾を制御しようとするときに混乱が生じる可能性があります。

テキスト装飾をオーバーライドする場合

次の 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>

ここで、期待される動作は、入れ子になったリスト項目には装飾が適用されず、u クラスを持つ親項目には下線が付けられることです。ただし、結果はすべてのリスト項目に下線が付いていることを示しています。

説明

この動作の理由は、CSS テキスト装飾の性質にあります。他のフォント プロパティとは異なり、text-decoration はすべてのネストされた要素を含む要素全体に適用されます。これは、親コンテナで定義された装飾が、独自のテキスト装飾スタイルに関係なく、その子に再帰的に適用されることを意味します。

この動作は CSS21 仕様に文書化されています。

Text decorations on inline boxes are drawn across the entire element, going across any descendant elements without paying any attention to their presence. The 'text-decoration' property on descendant elements cannot have any effect on the decoration of the element.

結論

CSS でテキスト装飾をオーバーライドするには、この継承動作を理解する必要があります。特定の要素が親から装飾を継承しないようにするには、ネストの各レベルに対して text-decoration: none を定義する必要があります。

以上がCSS テキスト装飾の継承を効果的にオーバーライドするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。