Warum wird die Textdekoration in CSS nicht korrekt geerbt?

Problem beim Überschreiben der CSS-Textdekoration

In der CSS-Eigenschaftshierarchie haben bestimmte Eigenschaften Vorrang vor geerbten Eigenschaften von übergeordneten Elementen. Die Eigenschaft text-decoration weist jedoch eine Ausnahme von dieser Regel auf.

Problem:

Bedenken Sie den folgenden Code:

<a href="#">
  A <span>red</span> anchor
</a>

a {
  color: blue;
  font-family: Times New Roman;
  text-decoration: underline;
}

span {
  color: red;
  font-family: Arial;
  text-decoration: none;
}

Wie in dieser [Demo](http://jsfiddle.net/5t9sV/) gezeigt, Die text-decoration-Eigenschaft des untergeordneten Elements span überschreibt nicht die Unterstreichungsdekoration des übergeordneten a-Elements.

Grund:

Gemäß der CSS-Spezifikation ist die text-decoration Eigenschaft von Nachkommenelementen „kann keinen Einfluss auf die Dekoration des Vorfahren haben.“ Dies bedeutet im Wesentlichen, dass Textdekorationen auf das gesamte Element angewendet werden, unabhängig von vorhandenen untergeordneten Elementen.

Lösung:

In CSS3 gibt es eine Eigenschaft namens text-decoration-skip, das auf das untergeordnete Element angewendet werden kann, um die geerbte Textdekoration zu überspringen. Es funktioniert jedoch nur für Inline-Elemente (z. B. span) und die unterstützten Browser können variieren.

Zum Beispiel, um den Text innerhalb des span-Elements anzuzeigen ohne Unterstreichung können Sie Folgendes hinzufügen:

span {
  text-decoration-skip: ink;
}

Beachten Sie, dass Tinte eine der möglichen Optionen ist Werte für text-decoration-skip, einschließlich Zeichen, Leerzeichen und eingebetteter Objekte.

Das obige ist der detaillierte Inhalt vonWarum wird die Textdekoration in CSS nicht korrekt geerbt?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!