Mở rộng lớp giả và phần tử giả CSS

```html <article> <h2>Đầu mục</h2> <p>Đoạn A</p> <p>Đoạn B</p> </article> <section><p>Đoạn C</p></section> <a href="#dich">Đến đoạn đích</a> <p id="dich">Đoạn đích</p> <p class="nhac">Lưu tệp trước khi tải lại.</p> ``` ```css p:first-child { color: blue; } p:first-of-type { border: 1px solid teal; } #dich:target { background-color: yellow; } p.nhac::before { content: "Lưu ý: "; } p.nhac::after { content: " (hết)"; } ``` p:first-child chọn p là phần tử con đầu tiên của cha: C khớp; A không khớp vì có h2 đứng trước. p:first-of-type chọn p đầu tiên trong các p cùng cha, nên A, C và đoạn đích trong mẫu khớp. Đoạn nhac không khớp vì trước nó đã có p#dich trong cùng body. Nháy “Đến đoạn đích” đổi phần đích của địa chỉ sang #dich; #dich:target đặt nền vàng cho đoạn ấy. Khi đích địa chỉ đổi sang phần khác, điều kiện này không còn thỏa. p.nhac::before thêm chữ “Lưu ý: ” trước nội dung hiển thị; ::after thêm “ (hết)” sau nội dung. Nội dung gốc trong p vẫn là câu nhắc lưu tệp; không cần thêm hai thẻ HTML để tạo các phần hiển thị này.