Phần ::first-linetử giả dùng để áp dụng kiểu cho dòng đầu tiên của phần tử. Hãy tưởng tượng một đoạn văn dài vài dòng (như đoạn này!). ::first-linecho phép bạn tạo kiểu cho dòng văn bản đầu tiên. Bạn có thể sử dụng nó để làm cho nó lớn hơn hoặc đặt nó thành những chiếc mũ nhỏ như một lựa chọn phong cách. Lượng văn bản được nhắm mục tiêu bởi phần tử giả này phụ thuộc vào một số yếu tố như chiều dài dòng, chiều rộng khung nhìn, kích thước phông chữ, khoảng cách giữa các chữ cái, khoảng cách từ. Ngay sau khi dòng ngắt, văn bản sau đó không được chọn nữa. Lưu ý rằng không có phần tử DOM thực nào được chọn ở đây (do đó phần tử "giả").
Phần tử giả này chỉ hoạt động trên các yếu tố khối cấp (khi displayđược thiết lập để một trong hai block, inline-block, table-caption, table-cell). Nếu được đặt trên một phần tử nội tuyến, không có gì xảy ra, ngay cả khi phần tử nội tuyến đó có ngắt dòng bên trong nó.
Cũng lưu ý rằng không phải tất cả các thuộc tính đều có thể được sử dụng trong một bộ quy tắc có chứa ::first-line. Hầu hết:
.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:… )Đặc tả CSS chính thức cho biết Đại lý người dùng có thể cho phép các thuộc tính khác nếu họ cảm thấy thích:
UA cũng có thể áp dụng các thuộc tính khác.
Một từ liên quan đến tính cụ thể
Bản demo sau đây cho thấy cách ::first-linecó thể ghi đè lên bất kỳ loại đặc tính cụ thể nào !important.
- Đoạn đầu tiên được đặt thành màu xám thông qua công cụ chọn thẻ
- Đoạn thứ 2 được đặt thành màu xám thông qua bộ chọn lớp
- Đoạn thứ 3 được đặt thành màu xám thông qua bộ chọn ID
- Đoạn thứ 4 được đặt thành màu xám thông qua một! Quan trọng bash
Điều này là do phần tử giả được coi như phần tử con, không chỉ là một phần của phần tử mẹ. Vì vậy, các quy tắc bạn áp dụng cho nó chỉ dành cho nó, các quy tắc cha chỉ có thể phân tầng cho nó.
Ngoài ra, hãy thử thay đổi kích thước trình duyệt của bạn để xem cách hoạt động của phần tử giả khi chiều rộng khung nhìn thay đổi.
Không có: dòng cuối cùng hoặc: dòng thứ n, mặc dù điều đó sẽ rất tuyệt.
Hỗ trợ trình duyệt
| Trình duyệt Chrome | Safari | Firefox | Opera | I E | Android | iOS |
|---|---|---|---|---|---|---|
| Vâng | Vâng | Vâng | 3.5+ (cũ) 9+ | 5.5+ (cũ) 9+ | Vâng | Vâng |
Vì ::first-linelà một phần tử giả, nó phải được đặt trước bằng hai dấu hai chấm như được chỉ định trong CSS2.1. Tuy nhiên, một số trình duyệt chỉ hỗ trợ cú pháp dấu hai chấm (Internet Explorer 5.5 - 9 và Opera 3.5 - 9).