:first-child 和 :nth-child(1) 不工作

Question

我正在尝试使用 nth-child(1) 或 first-child 选择器 (.contacts:first-child) 选择“联系人”地址元素的第一段，但它不起作用:(如果我创建一个class 到第一段并使用 class css 选择器，它工作正常。我错过了什么？

<div class="address-col">
    <p class="footer-heading">Contact us</p>
       <address class="contacts">
         <p>23 Harrison St., 2nd Floor, San Francisco, CA 94107</p>
    
         <p>
            <a class="footer-link" href="tel:415-201-6370">415-201-6370</a><br/>
            <a class="footer-link" href="mailto:hello@example.com">hello@example.com</a>
         </p>
       </address>
</div>

提前致谢！

Answer 1

The :first-child CSS pseudo-class represents the first element among a group of sibling elements.

正确的选择器是.contacts p:first-child

如果您希望它仅基于容器工作而不知道或关心它包含什么，您可以使用.contacts > *:first-child

当您在容器上使用它时，您实际上通过 css 请求的是一个具有 .contacts 类的元素，它是其兄弟元素中的第一个子元素。