The ::first-linepseudo-elemen adalah untuk memohon gaya untuk baris pertama unsur. Bayangkan perenggan yang panjangnya beberapa baris (seperti ini!). ::first-linemembolehkan anda menggayakan baris teks pertama. Anda boleh menggunakannya untuk membuatnya lebih besar atau meletakkannya dalam topi kecil sebagai pilihan gaya. Jumlah teks yang disasarkan oleh elemen pseudo ini bergantung pada beberapa faktor seperti panjang garis, lebar pandangan, ukuran huruf, jarak huruf, jarak kata. Sebaik sahaja garis putus, teks selepas itu tidak lagi dipilih. Perhatikan bahawa tidak ada elemen DOM sebenar yang dipilih di sini (dengan demikian elemen "semu").
Ini pseudo-elemen hanya berfungsi pada unsur-unsur blok-tahap (apabila displayditetapkan kepada sama ada block, inline-block, table-caption, table-cell). Sekiranya diatur pada elemen sebaris, tidak ada yang berlaku, walaupun elemen sebaris itu mempunyai jeda garis di dalamnya.
Perhatikan juga bahawa tidak semua sifat dapat digunakan dalam kumpulan aturan yang berisi ::first-line. Sebilangan besar:
.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:… )Spesifikasi CSS rasmi memberitahu Ejen Pengguna boleh membenarkan sifat lain jika mereka merasakannya:
UA juga boleh menggunakan harta tanah lain.
Perkataan mengenai kekhususan
Demo berikut menunjukkan bagaimana ::first-linedapat mengatasi sebarang kekhususan, walaupun !important.
- Parapgraf pertama ditetapkan menjadi kelabu melalui pemilih tag
- Parapgraf ke-2 ditetapkan menjadi kelabu melalui pemilih kelas
- Parapgraf ke-3 ditetapkan menjadi kelabu melalui pemilih ID
- Parapgrafi ke-4 ditetapkan menjadi kelabu melalui bash penting!
Ini kerana elemen pseudo diperlakukan seperti elemen anak, bukan hanya sebahagian daripada elemen induk. Oleh itu, peraturan yang anda gunakan hanya untuknya, peraturan ibu bapa mungkin akan berlaku.
Juga, cubalah mengubah saiz penyemak imbas anda untuk melihat bagaimana elemen pseudo-elemen ketika lebar viewport berubah.
Tidak ada: baris terakhir atau: baris ke-n, walaupun itu akan menjadi keren.
Sokongan Penyemak Imbas
| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Yap | Yap | Yap | 3.5+ (lama) 9+ | 5.5+ (lama) 9+ | Yap | Yap |
Oleh kerana ::first-lineelemen pseudo, ia harus diawali dengan dua titik dua seperti yang dinyatakan dalam CSS2.1. Namun sebilangan penyemak imbas hanya menyokong sintaks kolon tunggal (Internet Explorer 5.5 - 9 dan Opera 3.5 - 9).