Question

我使用bootstrap并拥有如下手风琴

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

但它们都将所有手风琴小组的背景颜色都改为红色。

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

Answer 1

问题是你选择的是他们父母的第一个孩子的所有.panel-body。在这种情况下，所有小组机构都是第一个孩子 - 他们是相应accordion父母的第一个孩子。

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

accordion:first-child > .panel-body

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

>符号代表“直系后代”，意味着所选的.panel-body必须是第一个accordion的直接子项（即不超过{{1}的一个级别}}）。

Answer 2

添加accordion:nth.of-type(1)，因为您也必须定位第一个手风琴标签。

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

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

这是小提琴:) http://jsfiddle.net/n29kw/

你也可以像这样写

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

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

Answer 3

这就是你想要的：

container:first-child .panel_body
{
    background-color: red;
}

其中container是accordion元素列表所在的元素。

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

3 个答案: