Wybór bezpośredni i pierwsze dziecko w CSS

Question

Mam Ustawienia HTML tak:

<div class = "myClass"> 

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


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

</div> 

ja po prostu chcesz dodać 10px margin-top do jednego oznaczonego „Content zmienić”. Ten <p> jest bezpośrednim potomkiem class="myClass", które uważam i jest to PIERWSZY, który jest <p>;

jednak ten styl CSS nie działa:

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

LUB

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

Każdy, dlaczego?

Answer 1

Ponieważ p nie jest pierwszym dzieckiem z .myClass. <div> jest. Zastosowanie:

.myClass p:first-of-type 

Można również użyć

.myClass > p:first-of-type 

wybrać dziecku wyraźnie.