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

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 サイトの他の関連記事を参照してください。