Wie kann ich die Vererbung der CSS-Textdekoration effektiv überschreiben?

Vererbung der CSS-Textdekoration verstehen

In CSS kann das Überschreiben der Textdekoration eine Herausforderung sein. Wenn ein übergeordnetes Element mit einem Textdekorationsstil angewendet wird, erbt es seine Dekoration an alle seine untergeordneten Elemente. Dies kann zu Verwirrung führen, wenn versucht wird, die Dekoration bestimmter Elemente zu steuern.

Der Fall des Überschreibens der Textdekoration

Betrachten Sie das bereitgestellte Beispiel, in dem das folgende CSS verwendet wird:

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 der HTML-Code lautet wie folgt:

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

Hier ist das erwartete Verhalten das Verschachtelte Listenelemente würden keine Dekoration erhalten, während die übergeordneten Elemente mit der u-Klasse unterstrichen würden. Das Ergebnis zeigt jedoch, dass alle Listenelemente unterstrichen sind.

Die Erklärung

Der Grund für dieses Verhalten liegt in der Natur der CSS-Textdekoration. Im Gegensatz zu anderen Schriftarteigenschaften gilt die Textdekoration für das gesamte Element, einschließlich aller verschachtelten Elemente. Dies bedeutet, dass die im übergeordneten Container definierte Dekoration rekursiv auf seine untergeordneten Container angewendet wird, unabhängig von deren eigenen Textdekorationsstilen.

Dieses Verhalten ist in der CSS21-Spezifikation dokumentiert:

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.

Fazit

Das Überschreiben der Textdekoration in CSS erfordert das Verständnis dieses Vererbungsverhaltens. Um sicherzustellen, dass bestimmte Elemente die Dekoration nicht von ihrem übergeordneten Element erben, ist es notwendig, text-decoration: none für jede Ebene der Verschachtelung zu definieren.

Das obige ist der detaillierte Inhalt vonWie kann ich die Vererbung der CSS-Textdekoration effektiv überschreiben?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!