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

Question

我正在尝试 select 使用 nth-child(1) 或 first-child select 或 (.contacts:first-child) 地址元素的第一段，但它不起作用 :( 如果我在第一段中创建 class 并使用 class css select 或者，它正常工作。我错过了什么？

<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 请求的是一个带有 class .contacts 的元素，这是第一个 child 在它的兄弟元素中。

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

:first-child and :nth-child(1) not working

html

css

css-selectors