::first-letteryra pseudo elementas, leidžiantis stiliaus pirmąją elemento raidę, nereikalaujant klijuoti žymės aplink tą pirmąją raidę jūsų HTML. Nors DOM nėra pridedama jokių žymų, panašu, kad pirmoji nukreipta raidė būtų įtraukta į žymą. Pirmąją raidę galite suformuoti taip, kaip padarytumėte tikrą elementą:
p::first-letter ( font-weight: bold; color: red; )
The first letter is bold and red
Rezultatas yra toks, tarsi aplink pirmąją raidę būtų dirbtinis elementas:
The first letter is bold and red.
Pirmoji raidė yra paryškinta ir raudona
- Pseudo elementas veikia tik tuo atveju, jei pagrindinis elementas yra blokinio konteinerio dėžutė (kitaip tariant, jis neveikia pirmosios
display: inline;elementų raidės ). - Jei turite
::first-letterir::first-lineelementą, ir pirmoji raidė bus paveldima iš pirmosios eilutės stilių, tačiau::first-letterstilių konfliktai perrašys valios stilius. - Jei
::beforesugeneruosite turinį, taikinys bus pirmoji raidė arba skyrybos ženklas, nesvarbu, ar jis yra pirminio teksto mazgo dalis, ar sukurtas naudojant sugeneruotą turinį.
Daugiau informacijos
- Kai naudojate iškarpas, naudokite ją kartu,
p:first-of-typekad ne kiekviena pirmoji raidė būtų stiliaus - Rašiklio pavyzdys - su sugeneruotu turiniu
- W3C „Wiki“
- W3C CSS3 selektorių modulis
Naršyklės palaikymas
Šie naršyklės palaikymo duomenys yra iš „Caniuse“, kuri turi daugiau informacijos. Skaičius rodo, kad naršyklė palaiko šios ir naujesnės versijos funkciją.
Darbalaukis
| „Chrome“ | „Firefox“ | T.Y | Briauna | „Safari“ |
|---|---|---|---|---|
| 9 | 3.5 | 9 | 12 | 5.1 |
Mobilusis / planšetinis kompiuteris
| „Android Chrome“ | „Android Firefox“ | „Android“ | „iOS Safari“ |
|---|---|---|---|
| 88 | 85 | 3 | 5,0–5,1 |
Pastaba: Jei naudojate „Internet Explorer 8“ ir žemesnę versiją, :first-lettervietoj dvigubos dvitaškio žymėjimo naudokite vieną dvitaškį .