在CSS中选择直接AND第一个孩子

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;
}

OR

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

任何人都明白为什么？

Answer 1

因为p不是.myClass的第一个孩子。 <div>是。{使用：

.myClass p:first-of-type

您可能还想使用

.myClass > p:first-of-type

明确选择孩子。