::first-linePseido-elements ir piemērot stilus pirmajā rindā elementa. Iedomājieties rindkopu, kas ir vairākas rindas gara (piemēram, šī!). ::first-lineļauj veidot pirmās teksta rindas stilu. Jūs to varētu izmantot, lai padarītu to lielāku vai ievietotu mazos vāciņos kā stilistisku izvēli. Teksta apjoms, uz kuru attiecas šis pseidoelements, ir atkarīgs no vairākiem faktoriem, piemēram, līnijas garuma, skata platuma, fonta lieluma, burtu atstarpes, atstarpes starp vārdiem. Tiklīdz rinda pārtraukta, teksts pēc tā vairs netiek izvēlēts. Ņemiet vērā, ka šeit netiek atlasīts faktiskais DOM elements (tātad “pseido” elements).
Šī pseido-elements darbojas tikai ar bloka līmeņa elementi (ja displayir iestatīts uz nu block, inline-block, table-caption, table-cell). Ja tas ir iestatīts uz inline elementa, nekas nenotiek, pat ja tajā iekļautajā elementā ir līnijas pārtraukums.
Ņemiet vērā arī to, ka ne visas īpašības var izmantot kārtulu komplektā, kas satur ::first-line. Pārsvarā:
.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:… )Oficiālā CSS specifikācija norāda, ka lietotāju aģenti var atļaut citas īpašības, ja viņiem tas patīk:
UA var piemērot arī citas īpašības.
Vārds attiecībā uz specifiku
Šis demo parāda, kā ::first-linespēj ignorēt jebkura veida specifiku, pat !important.
- Izmantojot tagu atlasītāju, 1. parafogrāfs ir iestatīts uz pelēku
- Izmantojot klases atlasītāju, 2. parafogrāfs ir iestatīts uz pelēku
- Izmantojot ID selektoru, 3. parafogrāfs ir iestatīts uz pelēku
- Ceturtais parafogrāfs ir iestatīts pelēkā krāsā caur svarīgu basu
Tas ir tāpēc, ka pret pseidoelementu izturas kā pret bērnu elementu, nevis tikai uz vecāku elementa daļu. Tātad noteikumi, kurus jūs tam lietojat, ir domāti tikai tam, vecāku noteikumi var tikai to pakļaut.
Mēģiniet arī mainīt pārlūkprogrammas lielumu, lai redzētu, kā rīkoties ar pseidoelementu, mainoties skata platumam.
Nav: pēdējās rindas vai: n-tās rindas, kaut arī tas būtu forši.
Pārlūka atbalsts
| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Jā | Jā | Jā | 3,5+ (vecs) 9+ | 5,5+ (vecs) 9+ | Jā | Jā |
Tā kā ::first-linetas ir pseidoelements, tas jāpievieno diviem koliem, kā norādīts CSS2.1. Tomēr dažas pārlūkprogrammas atbalsta tikai vienas kolonnas sintaksi (Internet Explorer 5.5 - 9 un Opera 3.5 - 9).