DigitalOcean bietet Cloud-Produkte für jede Phase Ihrer Reise. Starten Sie mit 200 $ kostenlosem Guthaben!
::first-letter ist ein Pseudo-Element, mit dem Sie den ersten Buchstaben eines Elements formatieren können, ohne dass Sie einen <span>-Tag um diesen ersten Buchstaben in Ihrem HTML einfügen müssen. Obwohl keine Tags zum DOM hinzugefügt werden, ist es so, als ob der angesprochene erste Buchstabe in ein -Tag eingeschlossen wäre. Sie können diesen ersten Buchstaben so formatieren, wie Sie ein echtes Element formatieren würden, mit
p::first-letter {
font-weight: bold;
color: red;
}<p>The first letter is bold and red</p>Das Ergebnis ist so, als hätten Sie ein Schein-Element um den ersten Buchstaben
<!-- Just an example, does not work! -->
<p>
<firstletter>T</firstletter>he first letter is bold and red.
</p>Der erste Buchstabe ist fett und rot
- Das Pseudo-Element funktioniert nur, wenn das Elternelement eine Block-Container-Box ist (mit anderen Worten, es funktioniert nicht für den ersten Buchstaben von
display: inline;-Elementen). - Wenn Sie sowohl
::first-letterals auch::first-lineauf einem Element haben, erbt der erste Buchstabe die Stile der ersten Zeile, aber Stile auf::first-letterüberschreiben diese, wenn Stile kollidieren. - Wenn Sie Inhalt mit
::beforegenerieren, wird der erste Buchstabe oder das erste Satzzeichen, egal ob es Teil des ursprünglichen Textknotens ist oder mit generiertem Inhalt erstellt wurde, zum Ziel.
Weitere Informationen
- Verwenden Sie ihn für Drop-Caps in Verbindung mit
p:first-of-type, damit nicht jeder erste Buchstabe formatiert wird - Beispiel Pen – mit generiertem Inhalt
- W3C Wiki
- W3C CSS3 Selectors Modul
Browser-Unterstützung
Diese Browser-Support-Daten stammen von Caniuse, das mehr Details enthält. Eine Zahl bedeutet, dass der Browser die Funktion ab dieser Version und aufwärts unterstützt.
Desktop
| Chrome | Firefox | IE | Edge | Safari |
|---|---|---|---|---|
| 9 | 3.5 | 9 | 12 | 5.1 |
Mobil / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 127 | 127 | 3 | 5.0-5.1 |
Hinweis: Für Internet Explorer 8 und früher verwenden Sie einen einzelnen Doppelpunkt :first-letter anstelle der Doppelpunkt-Notation.
sehr gut. Beste Webseite für CSS und Design.
sehr gut
Diese Webseite hat gutes Design und CSS
Danke
Funktioniert nicht mit Anker-Tags
a::first-child{
text-transform:uppercase;
}
Es funktioniert nur, wenn das Elternelement ein Block-Level-Element ist. Anker sind standardmäßig Inline-Elemente.
a:first-child{
text-transform:uppercase;
}
Warum kann ich nicht nur das Element '*' anpassen?
Kann nicht für das Element '*' formatieren
p:first-letter{ color:#BB0000; font-size:12px; font-weight:bolder;}
* MEIN
Seltsam, aber wenn ich diesen Code anwende und ihn zumindest in Chrome ausführe. Wenn ich die Hervorhebungsoption verwende, wird der erste Buchstabe nicht ausgewählt. Ist das ein bekanntes Problem?
Sieht aus wie ein bekannter Bug – http://stackoverflow.com/questions/19649540/css-first-letter-selection-highlighting
Ich habe es ausprobiert, aber es funktioniert nicht für die neueste Version von Firefox..!! D.h. 28.0 & 29.0!! war total schockiert!!
Perfekt, um blog posts wie Bücher zu gestalten. Sie kennen das doch, wo jedes Kapitel mit einem großartigen, fetten oder großen Buchstaben mit einer anderen Farbe beginnt...
Seien Sie vorsichtig mit dem
*-Zeichen.In diesen Beispielen wird nicht nur der erste Buchstabe berücksichtigt
*abc– hebt*ahervor**abc–**a(in allen Beispielen spielt die Anzahl der * keine Rolle, es wird alles hervorgehoben)a*bc–a*a**–a***a*bc–*a*.Okay, kann mir jemand erklären, was die Spezifikationsschreiber sich gedacht haben, als sie dies nur auf Block-Elemente angewendet haben? Ich bin bereit zu akzeptieren, dass es einen guten Grund geben könnte, aber im Moment sehe ich rot.
Hallo, vielen Dank für diese CSS-Tricks.
Bitte helfen Sie, ist es mit CSS möglich, den 4. Buchstaben in einem Wort eine andere Farbe zu geben?
Nicht usw. – bitte nur mit CSS.
Beispiel: boxCode << das 'C' muss rot gefärbt sein.
@Frank, ich glaube nicht, dass es nur mit CSS möglich ist, aber hier ist etwas mit JS, das das erreichen würde.
Firefox ignoriert $ und macht seltsame Dinge mit anderen Sonderzeichen/Satzzeichen. Zusammen mit dem speziellen Fall, dass es wirksam wird, fühlt sich der Selektor unzuverlässig an, was bedauerlich ist, da er wirklich nützlich sein könnte.
Ich erlebe etwas ziemlich Seltsames mit dem ::first-letter Pseudo-Element in Kombination mit Firefox. Ich habe ::first-letter einem div-Tag zugewiesen und einige Eigenschaften auf das Pseudo-Element angewendet, aber es passiert nichts. In allen anderen Browsern wie Safari, Chrome, Edge funktioniert es, aber nicht in Firefox. Wenn ich ::first-letter mit seinen Eigenschaften auf einen p-Tag setze, rendert Firefox es.
Seltsamerweise rendert die iOS-Version von Firefox die Eigenschaften.
Hat jemand eine Idee?
div::first-letterfunktioniert bei mir in Firefox 50.0.2 einwandfrei.Außerdem sollten Sie wissen, dass Firefox auf iOS Webkit und nicht Gecko als seine Engine verwendet (wegen einer Regel von Apple, die die Verwendung einer anderen Engine als der standardmäßig enthaltenen verbietet!).
Funktioniert auch nicht, wenn das Elternelement
display:flexhatIch habe ein Tag
dies ist start
Wie kann ich nur auf das letzte Wort "start" CSS anwenden?
Das heißt, ich möchte in einem Tag jedes Wort unterschiedlich formatieren
Jemand Hilfe?
Warum brauchen wir :first-letter, wenn wir das span-Tag haben?
Und im Vergleich zum :first-letter-Pseudo und dem span-Tag hat :first-letter weniger Eigenschaften, die verwendet werden können als das span-Tag.