Warum funktioniert mein CSS-Selektor „:first-letter' nicht für ein Span-Element?

CSS :first-letter Not Functioning

Context

Ein Versuch, den ersten Buchstaben eines Titelabschnitts zu formatieren, der mit der HTML-Ausgabe von Microsoft Word generiert wurde Die Verwendung des :first-letter-Selektors ist fehlgeschlagen. Der HTML-Code enthält ein span-Element mit verschiedenen Inline-Stilen.

Lösung

Das Problem entsteht, weil :first-letter nur bei Elementen auf Blockebene funktioniert, wie in der MDN-Dokumentation definiert. In diesem Fall ist das span-Element ein Inline-Element.

Um das Problem zu beheben, gibt es zwei Möglichkeiten:

1. Wenden Sie :first-letter auf das umschließende Absatzelement an.

p::first-letter {
    font-size: 500px;
}

2. Stellen Sie das Span-Element so ein, dass es als Inline-Block angezeigt wird, und wenden Sie :first-letter auf an it.

p b span::first-letter {
    font-size: 500px !important;
}
span {
    display: inline-block;
}

Hinweise

• :erster Buchstabe wirkt sich nicht auf Elemente aus, denen Inhalt vorangestellt ist, wie z. B. Bilder oder Inline-Tabellen in derselben Zeile.
• Die Verwendung von :before before :first-letter wendet den Stil auf das :before-Element statt auf das erste an Brief.

Das obige ist der detaillierte Inhalt vonWarum funktioniert mein CSS-Selektor „:first-letter' nicht für ein Span-Element?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!