Lựa chọn con trực tiếp và đầu tiên trong CSS

Question

Tôi có một thiết lập html như thế này:

<div class = "myClass"> 

    <div> 
     <a>Content</a> 
     <p><a>Content</a></p> 
    </div> 


    <p><a>Content to CHANGE!</a></p> 
    <p>Content</p> 

</div> 

tôi chỉ đơn giản muốn thêm 10px margin-top đến một trong những nhãn "nội dung để thay đổi". Đây là <p> là con trực tiếp của class="myClass" Tôi tin tưởng và đó là FIRST là <p>;

Tuy nhiên phong cách CSS này không hoạt động:

.myClass p:nth-child(1) { 
    margin-top: 10px; 
} 

HOẶC

.myClass > p:nth-child(1) { 
    margin-top: 10px; 
} 

Bất cứ ai nhìn thấy lý do tại sao?

Answer 1

Vì p không phải là con đầu tiên của .myClass. <div> là. Sử dụng:

.myClass p:first-of-type 

Bạn cũng có thể muốn sử dụng

.myClass > p:first-of-type 

để chọn con một cách rõ ràng.