Warum funktioniert mein CSS ::first-letter nicht bei Inline-Elementen in Word-generiertem HTML?

CSS ::first-letter funktioniert nicht

Wenn Sie versuchen, CSS-Stile auf Inline-Elemente in einem von Microsoft Word generierten HTML-Dokument anzuwenden, Möglicherweise treten Probleme mit dem ::first-letter-Selektor auf. Dieser Selektor zielt auf den ersten Buchstaben von Blockelementen wie Absätzen und Tabellenzellen ab, nicht auf Inline-Elemente wie Spannen.

Um diese Einschränkung zu überwinden, gehen Sie entweder wie folgt vor:

• Wenden Sie ::first-letter auf einen Block an Element:

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

  Nach dem Login kopieren

• Inline-Elementanzeige auf Block setzen:

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

  Nach dem Login kopieren

Denken Sie daran, ::first-letter wirkt sich nicht auf Inline-Elemente aus, es sei denn, ihre Anzeigeeigenschaft ist auf block oder inline-block gesetzt. Dieses Verhalten ergibt sich aus der Tatsache, dass ::first-letter mit Blockelementen arbeitet, innerhalb derer eine erste Zeile definiert werden kann.

Zusätzliche Überlegungen:

• Vermeiden Platzieren Sie Inhalte vor dem ersten Buchstaben, da dies das Format von ::first-letter beeinträchtigen könnte.
• Wenn Sie :before mit ::first-letter verwenden, ist dies der Fall formatiert den :before-Inhalt, nicht den eigentlichen Anfangsbuchstaben.

Beispiele:

• [Working Fiddle with Block Styling](http:/ /jsfiddle.net/sandeep/KvGr2/9/)
• [Inline-Block Beispiel](http://krijnhoetmer.nl/stuff/css/first-letter-inline-block/)

Referenzen:

• [MDN-Dokumentation zu ::first-letter](https://developer.mozilla.org/en-US/docs/Web/CSS/::first-letter)
• [SitePoint-Referenz zum CSS-Pseudoelement :first-letter] (http://reference.sitepoint.com/css/pseudoelement-firstletter)

Das obige ist der detaillierte Inhalt vonWarum funktioniert mein CSS ::first-letter nicht bei Inline-Elementen in Word-generiertem HTML?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!