我該如何選擇第一個孩子時，它包裹在一個錨

Question

我有歸結爲

<div class="grid"> 
    <a> <div class="logoContainer"> <img> <p> </p> </div> </a> 
    <a> <div class="logoContainer"> <img> <p> </p> </div> </a> 
    <a> <div class="logoContainer"> <img> <p> </p> </div> </a> 
    <!--which is the same as--> 
    <a> 
    <div class="logoContainer"> 
     <img> 
     <p> 
     </p> 
    </div> 
    </a> 
</div> 

我需要選擇第一.logoContainer一個HTML文件，而是因爲他們的所有兒童錨纏在他們身上，我不能使用：第一胎。

是否可以從.grid中僅選擇第一個.logoContainer？

Answer 1

Demo

.grid a:first-child .logoContainer { 
    color: green; 
} 

，或者您也可以做

.grid a:nth-child(1) .logoContainer { 
    color: green; 
} 

Read this for more information on child and siblings selectors

Answer 2

.grid a:first-child .logoContainer { ... }

這意味着選擇的.grid第一a內的logoContainer。我希望它有幫助！

Answer 3

你測試

.grid > a:first-child > div > img{border:1px solid red;}