Wie funktioniert die CSS-Textdekorationsvererbung und warum schlägt das Überschreiben manchmal fehl?

Text-Decoration-Vererbung verstehen

In CSS regelt die Text-Decoration-Eigenschaft die dekorativen Linienstile, die auf Text angewendet werden. Im Gegensatz zu anderen textbezogenen Stilen wie der Schriftstärke verhält sich die Textdekoration jedoch anders.

Das Problem beim Überschreiben geerbter Dekoration

Beachten Sie den folgenden CSS-Code:

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

Dieser Code soll verhindern, dass geerbte Dekorationen auf verschachtelte Listenelemente angewendet werden. Die folgende HTML-Struktur zeigt jedoch ein unerwartetes Ergebnis:

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

Erklärung

Das Problem liegt in der Tatsache, dass die Textdekoration für alle verschachtelten Elemente innerhalb der gilt Element, auf das es angewendet wird. Das bedeutet, dass selbst wenn Sie versuchen, die geerbte Dekoration auf verschachtelten Elementen zu überschreiben, die geerbte Dekoration weiterhin angewendet wird.

Gemäß der CSS 2.1-Spezifikation wird „Textdekoration auf Inline-Boxen über das gesamte Element gezeichnet“. , indem Sie alle Nachkommenelemente durchgehen, ohne auf deren Elemente zu achten Präsenz.“

Lösung

Um dieses Problem anzugehen, ist ein anderer Ansatz erforderlich. Anstatt sich auf verschachtelte Selektoren zu verlassen, um die geerbte Dekoration zu überschreiben, verwenden Sie eine alternative Technik wie:

• Verwenden der Pseudoelemente ::before oder ::after, um dekorative Linien zu erstellen
• Employing JavaScript zum dynamischen Ändern der Textdekorationseigenschaft
• Anwenden der Textdekorationseigenschaft direkt auf die gewünschten Elemente, ohne sich darauf verlassen zu müssen Vererbung

Das obige ist der detaillierte Inhalt vonWie funktioniert die CSS-Textdekorationsvererbung und warum schlägt das Überschreiben manchmal fehl?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!