Question

我对第一个孩子选择器有疑问。在代码中，我有两个div（同一类），img（每个）和p（每个）。当我输入CSS .div-class：first-child {margin：10}时，在p中添加了一个边距，并且仅在第一个div中。

首先问：为什么没有将边距添加到img（div中的第一个元素）第二个问题：为什么仅在第一个div中添加边距（第二个具有相同的类名）

<section class="section-offer">

    <div class="section-offer-single">
        <img src="images/pizza.png" alt="Pizza">
        <p>Some text</p>
    </div>

    <div class="section-offer-single">
        <img src="images/pizza.png" alt="Pizza">
        <p>Some text</p>
    </div>

</section>


.section-offer-single:first-child{
  margin: 0px 0px 130px;
}

Answer 1

:first-child是用于选择是第一个子元素的元素的选择器，而不是该元素的第一个子元素。

要获取.section-offer-single元素的第一个子元素，请使用选择器：

.section-offer-single > :first-child

这也解释了为什么只有第一个.section-offer-single才应用了样式-这是因为 it 是其父级的（唯一的）第一个孩子。

Answer 2

为什么未将边距添加到img（div中的第一个元素）

选择器为.section-offer-single:first-child。 :first-child与<img>匹配时，.section-offer-single 不匹配。

为什么仅在第一个div中添加边距（第二个具有相同的类名）

第二个<div>匹配.section-offer-single，但不匹配:first-child。

仅当整个选择器匹配时，选择器才匹配。（请注意，,将多个选择器组合在一个规则集中）。

我听不懂CSS：第一个孩子

2 个答案: