html - 在 CSS 中选择直接和第一个 child

Question

我有一个这样的 html 设置:

<div class = "myClass">

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


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

</div>

我只想添加 10px margin-top到标有“要更改的内容”的那个。这<p>是 class="myClass" 的直系子代我相信这是第一个 <p> ;

但是这个 CSS 样式不起作用:

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

或

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

有人知道为什么吗？

Answer 1

因为 p不是 .myClass 的第一个 child . <div>是。使用:

.myClass p:first-of-type

您可能还想使用

.myClass > p:first-of-type

明确选择 child 。