p:first-child { font-size: 1.5em; }9 là một lớp giả chọn phần tử đích nếu nó là phần tử con đầu tiên của một số phần tử khác. Nghĩa là,
p:first-child { font-size: 1.5em; }9 sẽ chỉ khớp với phần tử nếu nó là phần tử con đầu tiên của phần tử cha của nó
Ví dụ: giả sử bạn có HTML sau
Lorem Ipsum...
Another Lorem Ipsum...
Phần sau đây sẽ chọn và áp dụng các kiểu cho đoạn đầu tiên, trong trường hợp này, là con đầu tiên của cha mẹ của nó
p:first-child { font-size: 1.5em; }
Quy tắc trên sẽ không tạo kiểu cho đoạn văn trong ví dụ sau, vì nó không phải là con đầu tiên của cha mẹ
p:first-child { font-size: 1.5em; }0 của nó
Heading
Lorem Ipsum...
Câu đố & Ghi chú
Nếu bạn muốn chọn và tạo kiểu cho đoạn đầu tiên bên trong một vùng chứa, cho dù đó có phải là phần tử con đầu tiên hay không, bạn có thể sử dụng bộ chọn
p:first-child { font-size: 1.5em; }1, như tên gợi ý, sẽ chọn phần tử đầu tiên của loại của nó, cho dù nó có hay không. . Ví dụ:
p:first-child { font-size: 1.5em; }2 sẽ chọn đoạn xuất hiện sau tiêu đề trong ví dụ mã nguồn ở trên, nhưng sẽ không khớp với bất kỳ đoạn nào khác xuất hiện sau đó
Lớp giả
p:first-child { font-size: 1.5em; }9, giống như các lớp giả khác, có thể được xâu chuỗi với các bộ chọn khác, chẳng hạn như
p:first-child { font-size: 1.5em; }4, để cung cấp các kiểu di chuột cho phần tử được chọn. Nó cũng có thể được xâu chuỗi với các phần tử giả
p:first-child { font-size: 1.5em; }5 và
p:first-child { font-size: 1.5em; }6. Xem các ví dụ và phần demo trực tiếp bên dưới để biết ví dụ
ví dụ
Giả sử bạn có đánh dấu sau
Understanding :first-child
This is the first paragraph, but it's not the first child of its parent.
This is another paragraph. This is a span inside the paragraph.
- First list item
- Second list item
- Third list item
Quy tắc sau sẽ khớp với
p:first-child { font-size: 1.5em; }7 bên trong đoạn thứ hai, bởi vì nó là con đầu lòng của cha mẹ nó
p:first-child { font-size: 1.5em; }1
Quy tắc sau sẽ khớp với mục danh sách đầu tiên trong danh sách không có thứ tự ở trên
p:first-child { font-size: 1.5em; }2
Quy tắc sau sẽ không phù hợp với bất kỳ đoạn nào ở trên, bởi vì không ai trong số họ là con đầu lòng của cha mẹ nó
p:first-child { font-size: 1.5em; }
Quy tắc sau sẽ bọc
p:first-child { font-size: 1.5em; }7 trong hai dấu ngoặc đơn bằng cách sử dụng các phần tử giả
p:first-child { font-size: 1.5em; }5 và
p:first-child { font-size: 1.5em; }6
p:first-child { font-size: 1.5em; }7
Bạn có thể xem demo trực tiếp ở phần tiếp theo
Bản thử trực tiếp
Xem bản demo này trên Codrops PlaygroundHỗ trợ trình duyệt
Lớp giả
p:first-child { font-size: 1.5em; }9 được hỗ trợ trong Chrome, Firefox, Safari, Opera 9. 5+, Internet Explorer 7+ và trên Android và iOS
ghi chú
Internet Explorer 7 không cập nhật kiểu khi các phần tử được thêm động. Trong Internet Explorer 8, nếu một phần tử được chèn động bằng cách nhấp vào liên kết thì kiểu con đầu tiên không được áp dụng cho đến khi liên kết mất tiêu điểm
Lớp giả
p:first-child { font-size: 1.5em; }9 có nghĩa là "nếu phần tử này là con đầu tiên của cha mẹ nó".
p:first-child { font-size: 1.5em; }4 có nghĩa là "nếu phần tử này là phần tử con cuối cùng của cha mẹ nó". Lưu ý rằng chỉ tính các nút phần tử [thẻ HTML], các lớp giả này bỏ qua các nút văn bản
Giấy làm bài
p:first-child { font-size: 1.5em; }8
Đây là div id="test". Đoạn đầu tiên nên được gạch chân;
Đoạn đầu tiên
Đoạn thứ hai
Năng động
Điều gì xảy ra khi chúng ta tự động thêm đoạn văn vào div?