时间戳

首页 > 解决方案 > 我无法理解 CSS：first-child

html - 我无法理解 CSS：first-child

问题描述

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

第一个问：为什么img没有添加margin（div中的第一个元素）第二个问：为什么只在第一个div中添加margin（第二个有这个相同的类名）

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

标签： htmlcss

解决方案

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

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

.section-offer-single > :first-child

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

推荐阅读