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 (

innerhalb von

) ebenfalls eine Textdekoration erhalten, obwohl Sie die Textdekoration explizit festgelegt haben: keine auf diesen Elementen. Dies liegt daran, dass das übergeordnete li (mit der Klasse „u“) seine Textdekoration an seine untergeordneten Elemente erbt.

Um die Dekoration aus den verschachtelten Listenelementen zu entfernen, müssen Sie jeweils text-decoration: none angeben Ebene der Verschachtelung. Dies würde wie folgt aussehen:

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 */
}

Weitere Überlegungen

Beachten Sie, dass das Browserverhalten hinsichtlich der Weitergabe von Textdekorationen variieren kann. Einige Browser interpretieren die Spezifikation strenger und wenden sie wie oben beschrieben an, während andere die Dekoration möglicherweise sogar mit text-decoration:none für untergeordnete Elemente weitergeben.

Das obige ist der detaillierte Inhalt vonWarum entfernt „text-decoration: none' nicht immer Textdekorationen in verschachtelten CSS-Elementen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!