Wie funktioniert die Vererbung der CSS-Textdekoration mit untergeordneten Elementen?-CSS-Tutorial-php.cn

Wie funktioniert die Vererbung der CSS-Textdekoration mit untergeordneten Elementen?

Patricia Arquette

Freigeben： 2024-12-03 22:11:16

Original

629 Leute haben es durchsucht

How Does CSS Text Decoration Inheritance Work with Child Elements?

CSS text-decoration Property Override Issues

In HTML und CSS wird die text-decoration-Eigenschaft verwendet, um Dekorationen hinzuzufügen oder zu entfernen, z B. Unterstreichungen oder Durchstreichungen, an Textelementen. Wenn ein untergeordnetes Element jedoch seine eigene Textdekorationseigenschaft enthält, stellt sich die Frage, ob die untergeordnete Eigenschaft die vom übergeordneten Element geerbte Eigenschaft überschreiben kann.

Betrachten Sie dieses CSS-Beispiel:

a {
    text-decoration: underline;
}

span {
    text-decoration: none;
}

Nach dem Login kopieren

In diesem Fall ist Das Element erbt die Eigenschaft text-decoration nicht vom parent und wendet stattdessen seine eigene Textdekoration an: none; Wert. Dieses Ergebnis wird erwartet, da die Eigenschaft „text-decoration“ sowohl für das übergeordnete als auch für das untergeordnete Element angegeben wurde.

Gemäß der CSS-Spezifikation „text-decoration“ kann die Eigenschaft „text-decoration“ für untergeordnete Elemente keine Auswirkung auf das haben Dekoration des Vorfahren. Dies bedeutet, dass die Textdekoration des übergeordneten Elements immer angewendet wird, unabhängig vom Wert des untergeordneten Elements.

Die verlinkte Frage enthält auch weitere Informationen aus der Spezifikation und besagt, dass „Textdekorationen auf Inline-Boxen über das gesamte Element gezeichnet werden.“ , über alle Nachkommenelemente hinweggehen, ohne auf deren Anwesenheit zu achten. Dies bedeutet, dass die Textdekoration des übergeordneten Elements immer auf die gesamte Inline-Box angewendet wird, einschließlich aller untergeordneten Elemente.

In späteren CSS-Versionen (nach 2.1) wurde die Eigenschaft text-decoration-skip zur Adressierung eingeführt dieses Problem. Durch Festlegen von text-decoration-skip: skip für das untergeordnete Element kann die Dekoration des übergeordneten Elements gezwungen werden, den Inhalt des untergeordneten Elements zu überspringen.

Zusammenfassend lässt sich sagen, dass die text-decoration-Eigenschaft nicht durch untergeordnete Elemente überschrieben werden kann Design der Spezifikation. Um die Textdekoration an bestimmten Teilen eines Elements zu steuern, kann in späteren CSS-Versionen die Eigenschaft text-decoration-skip verwendet werden.

Das obige ist der detaillierte Inhalt vonWie funktioniert die Vererbung der CSS-Textdekoration mit untergeordneten Elementen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!