第一类选择器适用于父级的所有子级

Question

这是我的HTML和CSS：

.wrapper > p:first-of-type {
    margin-bottom: 20px;
}

<div class="wrapper">
    <p>...</p>
    <p>...</p>
</div>

但是，margin属性同时应用于两个元素。怎么了？

Answer 1

它不仅适用于第一个元素，但不适用于第二个元素 而且即使应用到它，您也没有注意到，因为页边距下降了并且最后一个元素

Answer 2

您可以在CSS中添加两个额外的规则，这些规则将向您显示第一个选择器在正常工作。首先，您可以添加

* {
  margin: 0
}

默认情况下，大多数浏览器都会为所有<p>元素添加一个margin-top和margin-bottom。如果您没有明确消除这种情况（有时称为CSS重置），则将始终使用它。摆脱它，您可以看到只有顶部的<p>元素的底部有空白。

如果仍然看不到此内容，可以添加

p {
  border: 1px solid green
}

带有边框将使您更清楚地看到，上段有一个边距，而下段没有。添加第三个<p>，以使结果更加鲜明。

* {
  margin: 0
}
.wrapper > p:first-of-type {
    margin-bottom: 20px;
}
p {
  border: 1px solid green
}

<div class="wrapper">
    <p>...</p>
    <p>...</p>
    <p>...</p>
</div>