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

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。是<div>。利用：

.myClass p:first-of-type

您可能还想使用

.myClass > p:first-of-type

明确选择孩子。