html - 如何使用 CSS 更改第一个元素的样式

Question

我使用 bootstrap 并有一个像下面这样的 Accordion

<accordion>
   <panel class='panel-body'>
       contents..
   </panel>
</accordion>
<accordion>
   <panel class='panel-body'>
       contents..
   </panel>
</accordion>
<accordion>
   <panel class='panel-body'>
       contents..
   </panel>
</accordion>

我只想使用 CSS 更改第一个面板主体的背景颜色。

我试过了

.panel-body:nth-of-type(1){
    background-color: red;
}

.panel-body:first-child{
    background-color: red;
}

但它们都将所有 Accordion 面板的背景颜色更改为红色。

有人可以帮我解决这个问题吗？谢谢!

Answer 1

问题是您要选择所有 .panel-body，它们是其父项的第一个子项。在这种情况下，所有的面板主体都是第一个 child - 它们是其对应的 accordion parent 的第一个 child 。

您可能希望在第一个 accordion 中选择 .panel-body:

accordion:first-child > .panel-body

查找第一个 accordion，然后选择其中的 .panel-body。

> 符号表示“直接后代”，这意味着所选的 .panel-body 必须是第一个 accordion 的直接子代(即不超过 accordion 的一层。