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 Playground

Hỗ 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?

Con đầu lòng và con cuối cùng trong CSS là gì?

Con đầu lòng nghĩa là gì?

Cái gì đầu tiên trong CSS?

Sự khác biệt giữa con đầu tiên và loại đầu tiên trong CSS là gì?