通过使用 :nth-of-type 我试图选择 div #benefits-section 中的第一个 div，但由于某种原因它选择了所有 div 标签

Question

以下是我正在处理的 HTML 和 CSS。

    https://jsfiddle.net/mpgsrwt0/

 #benefits-section h2{
display: block;
font-size: 2rem;
font-family: Outfit;
font-weight: 500;
margin-bottom: 1rem;
}

#benefits-section div:nth-of-type(1){
background-color: yellow;
}

当我尝试在第二个和第三个 div 上使用第 n 个类型时，它起作用了。

或者当我尝试使用第一个 div 的选择器时，它停止工作。它选择所有 div 标签并在其上应用背景。我不确定是什么导致了这个错误。

Answer 1

您拥有的所有内部

div

都是该类型的第一个子级，因此它们正确地全部为黄色。

您只想定位直接子代（不是孙子）的

div

，因此请更改此：

     #benefits-section div:nth-of-type(1) {
       background-color: yellow;
     }

对此：

     #benefits-section > div:nth-of-type(1) {
       background-color: yellow;
     }