ホームページ > ウェブフロントエンド > CSSチュートリアル > 「text-decoration: none」がネストされた CSS 要素のテキスト装飾を常に削除しないのはなぜですか?

「text-decoration: none」がネストされた CSS 要素のテキスト装飾を常に削除しないのはなぜですか?

DDD
リリース: 2024-12-15 05:10:12
オリジナル
116 人が閲覧しました

Why Doesn't `text-decoration: none` Always Remove Text Decorations in Nested CSS Elements?

CSS テキスト装飾オーバーライドについて

CSS では、text-decoration プロパティを使用して、下線やテキスト効果の追加または削除が可能です。取り消し線。ただし、テキスト装飾を削除するオーバーライドの試みが効果的ではないように見える状況が発生する場合があります。これは、text-decoration が font-weight などの他のテキスト スタイル プロパティとは異なる動作をするためです。

ネストされた要素の伝播

この動作を理解する鍵は、次の伝播にあります。テキストの装飾スタイル。要素にテキスト装飾を適用すると、その要素だけでなく、その要素内のネストされた要素にも影響します。つまり、親要素に text-decoration: none を設定すると、親要素自体から装飾が削除されるだけですが、子要素は親の装飾を継承します。

この例では、次の 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 を HTML に適用すると、テキスト装飾を明示的に設定している場合でも、ネストされたリスト項目 (

    内の
  • ) にもテキスト装飾が適用されます。これらの要素には何もありません。これは、親 li (クラス "u") がそのテキスト装飾を子要素に継承しているためです。

    ネストされたリスト項目から装飾を削除するには、それぞれに text-decoration: none を指定する必要があります。ネストのレベル。これは次のようになります。

    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: none; /* Added */
    }
    ログイン後にコピー

    さらなる考慮事項

    テキスト装飾の伝播に関してはブラウザの動作が異なる可能性があることに注意してください。一部のブラウザーは仕様をより厳密に解釈し、上記のように適用しますが、他のブラウザーは、子孫要素に text-decoration: none set を使用しても装飾を伝播する場合があります。

    以上が「text-decoration: none」がネストされた CSS 要素のテキスト装飾を常に削除しないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート