Warum entfernt „text-decoration: none' nicht immer Textdekorationen in verschachtelten CSS-Elementen?

Grundlegendes zum Überschreiben von CSS-Textdekorationen

In CSS ermöglicht die Eigenschaft text-decoration das Hinzufügen oder Entfernen von Texteffekten wie Unterstreichungen oder Durchgestrichen. Es kann jedoch vorkommen, dass Ihre Überschreibungsversuche zum Entfernen der Textdekoration nicht wirksam erscheinen. Dies liegt daran, dass sich Textdekoration anders verhält als andere Textstileigenschaften wie Schriftstärke.

Weitergabe verschachtelter Elemente

Der Schlüssel zum Verständnis dieses Verhaltens liegt in der Ausbreitung von Textdekorationsstile. Wenn Sie Textdekoration auf ein Element anwenden, wirkt sich dies nicht nur auf dieses Element, sondern auch auf alle darin verschachtelten Elemente aus. Das bedeutet, dass durch das Festlegen von text-decoration: none für ein übergeordnetes Element nur die Dekoration vom übergeordneten Element selbst entfernt wird, alle untergeordneten Elemente jedoch die Dekoration des übergeordneten Elements erben.

Beispiel

Im bereitgestellten Beispiel haben Sie das folgende 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;
}

Und das Folgende 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>

Die Anwendung dieses CSS auf den HTML-Code führt dazu, dass die verschachtelten Listenelemente (