如何改變使用CSS

Question

的第一元素的樣式我用引導和有手風琴像下面

<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:first-child > .panel-body 

這看起來對於第一accordion，然後選擇裏面的.panel-body。

>的符號代表「直系後代」，意思是所選的材料必須是第一accordion（即，不超過一個深於accordion級）的直接子的.panel-body。

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元素的列表是。