::first-linePseudoelement jest zastosowanie stylów do pierwszej linii elementu. Wyobraź sobie akapit składający się z kilku wierszy (jak ten!). ::first-linepozwala nadać styl pierwszej linii tekstu. Możesz go użyć, aby go powiększyć lub umieścić go w małych kapslach jako stylistyczny wybór. Ilość tekstu, do którego kierowany jest ten pseudoelement, zależy od kilku czynników, takich jak długość linii, szerokość widocznego obszaru, rozmiar czcionki, odstępy między literami, odstępy między wyrazami. Po przerwaniu linii tekst po niej nie jest już zaznaczony. Zwróć uwagę, że nie jest tu wybrany żaden rzeczywisty element DOM (czyli element „pseudo”).
Pseudo-element działa tylko na elementy blokowe (jeśli displayjest ustawiony na block, inline-block, table-caption, table-cell). Jeśli jest ustawiony na elemencie wbudowanym, nic się nie dzieje, nawet jeśli ten element ma w sobie podział wiersza.
Należy również pamiętać, że nie wszystkie właściwości mogą być używane w zestawie reguł zawierającym ::first-line. Przeważnie:
.element::first-line ( font-style:… font-variant:… font-weight:… font-size:… font-family:… line-height:… color:… word-spacing:… letter-spacing:… text-decoration:… text-transform:… background-color:… background-image:… background-position:… background-repeat:… background-size:… background-attachment:… )Oficjalna specyfikacja CSS mówi agentom użytkownika, że mogą zezwolić na inne właściwości, jeśli mają na to ochotę:
UA mogą również stosować inne właściwości.
Słowo dotyczące specyfiki
Poniższe demo pokazuje, w jaki sposób ::first-linejest w stanie nawet zastąpić dowolny rodzaj specyfiki !important.
- Pierwszy parapograf jest szary za pomocą selektora znaczników
- Drugi parafgraf jest szary za pomocą selektora klas
- Trzeci parafgraf jest szary za pomocą selektora ID
- Czwarty parafgraf jest szary przez! Ważny bash
Dzieje się tak, ponieważ pseudoelement jest traktowany jak element podrzędny, a nie tylko część elementu nadrzędnego. Tak więc reguły, do których się stosujesz, są tylko dla niego, reguły nadrzędne mogą po prostu do niego wpływać.
Spróbuj także zmienić rozmiar przeglądarki, aby zobaczyć, jak zachowuje się pseudoelement, gdy zmienia się szerokość widoku.
Nie ma: ostatniej linii ani: n-tej linii, nawet jeśli byłoby fajnie.
Wsparcie przeglądarki
| Chrom | Safari | Firefox | Opera | TO ZNACZY | Android | iOS |
|---|---|---|---|---|---|---|
| tak | tak | tak | 3.5+ (stare) 9+ | 5,5+ (stare) 9+ | tak | tak |
Ponieważ ::first-linejest to pseudoelement, powinien być poprzedzony dwoma dwukropkami, jak określono w CSS2.1. Jednak niektóre przeglądarki obsługują tylko składnię pojedynczego dwukropka (Internet Explorer 5.5 - 9 i Opera 3.5 - 9).