当它被包裹在锚中时，如何选择第一个孩子

Question

我有一个归结为

的HTML文件

<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，但因为它们都是围绕着它们的锚的孩子，所以我不能使用：first-child。

是否可以从.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 { ... }

这意味着在logoContainer的第一个a内选择.grid。我希望它有所帮助！

Answer 3

你测试

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