風格jquery與父母不同的嵌套手風琴

Question

我有一個標準的嵌套JQuery UI手風琴。我的問題是，我想讓風格的內手風琴不同於父手風琴。我知道什麼CSS規則適用於手風琴的風格，但我找不到將選擇內部手風琴的選擇器。

甚至接近的唯一選擇器是：nth-​​child（）僞選擇器。問題是我不知道內部手風琴有多少元素，頂尖手風琴會有多少元素。

一條規則是我知道永遠不會有第三層的嵌套。

這CSS規則將樣式所有的手風琴頭

.ui-accordion-header.ui-state-default { 
    background: none repeat scroll 0 0 #19A053; 
    border-color: #19A053; 
} 

我需要一種方法做這樣的事情，現在

.ui-accordion-header.ui-state-default if-inside-another-accordion{ 
    background: none repeat scroll 0 0 #dddddd; 
    border-color: #dddddd; 
} 

如果你在CSS選擇器專家，但有從來沒有見過JQuery生成的HTML，下面是一個嵌套的手風琴生成代碼的示例。

<div id="content"> 
    <div role="tablist" style="display: block;" class="gw_accordion ui-accordion ui-widget ui-helper-reset"> 
    <div tabindex="0" aria-selected="true" aria-controls="ui-accordion-1-panel-0" id="ui-accordion-1-header-0" role="tab" class="ui-accordion-header ui-helper-reset ui-state-default ui-accordion-icons ui-accordion-header-active ui-state-active ui-corner-top"><span class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-s"></span><a class="gw_chapter_menu_link" href="#24" alt="">Top Level Header 1</a></div> 
    <div aria-hidden="false" aria-expanded="true" role="tabpanel" aria-labelledby="ui-accordion-1-header-0" id="ui-accordion-1-panel-0" style="display: block;" class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom ui-accordion-content-active"> 
     <p>some text here</p> 
     <div role="tablist" style="display: block;" class="gw_accordion ui-accordion ui-widget ui-helper-reset"> 
     <div tabindex="0" aria-selected="false" aria-controls="ui-accordion-2-panel-0" id="ui-accordion-2-header-0" role="tab" class="ui-accordion-header ui-helper-reset ui-state-default ui-accordion-icons ui-corner-all"><span class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-e"></span><a class="gw_chapter_menu_link" href="#27" alt="Maybe Now???">Nested Header 1</a></div> 
     <div aria-hidden="true" aria-expanded="false" role="tabpanel" aria-labelledby="ui-accordion-2-header-0" id="ui-accordion-2-panel-0" style="display: none;" class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom"> 
      <p>some text here</p> 
     </div> 
     <div tabindex="-1" aria-selected="false" aria-controls="ui-accordion-2-panel-1" id="ui-accordion-2-header-1" role="tab" class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all ui-accordion-icons"><span class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-e"></span><a class="gw_chapter_menu_link" href="#25" alt="">Nested Header 2</a></div> 
     <div aria-hidden="true" aria-expanded="false" role="tabpanel" aria-labelledby="ui-accordion-2-header-1" id="ui-accordion-2-panel-1" style="display: none;" class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom"> 
     <p>some text here</p> 
     </div> 
     </div> 
    </div> 
    <div tabindex="-1" aria-selected="false" aria-controls="ui-accordion-1-panel-1" id="ui-accordion-1-header-1" role="tab" class="ui-accordion-header ui-helper-reset ui-state-default ui-accordion-icons ui-corner-all"><span class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-e"></span><a class="gw_chapter_menu_link" href="#26" alt="I hope this works">Top Level Header 2</a></div> 
    <div aria-hidden="true" aria-expanded="false" role="tabpanel" aria-labelledby="ui-accordion-1-header-1" id="ui-accordion-1-panel-1" style="display: none;" class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom"> 
     <p>some text here</p> 
     <div role="tablist" style="display: block;" class="gw_accordion ui-accordion ui-widget ui-helper-reset"> 
     <div tabindex="0" aria-selected="false" aria-controls="ui-accordion-3-panel-0" id="ui-accordion-3-header-0" role="tab" class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all ui-accordion-icons"><span class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-e"></span><a class="gw_chapter_menu_link" href="#28" alt="Really">Nested Header 1(for second top header)</a></div> 
     <div aria-hidden="true" aria-expanded="false" role="tabpanel" aria-labelledby="ui-accordion-3-header-0" id="ui-accordion-3-panel-0" style="display: none;" class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom"> 
      <p>some text here</p> 
     </div> 
     </div> 
    </div> 
    </div> 
</div> 

Answer 1

對我來說，它只是看起來像你需要這樣做：

.ui-accordion.ui-state-default .ui-accordion .ui-accordion-header.ui-state-default { 
    background: none repeat scroll 0 0 #dddddd; 
    border-color: #dddddd; 
} 

，或者根據您的依賴是否是在的.ui狀態默認狀態下，你也可以簡化它：

.ui-accordion .ui-accordion .ui-accordion-header { 
    background: none repeat scroll 0 0 #dddddd; 
    border-color: #dddddd; 
} 

這基本上是說：「只有這些樣式應用到的.ui-手風琴頭如果是的.ui-手風琴這也是一個的.ui-手風琴元素的後代的後代。」

另一種簡單的方法來可視化，這可能是這樣的：

這裏有一個盛有頭，另一容器內用頭：

<div class="container"> 
    <h1 class="header">Header 1</h1> 
    <div class="container"> 
     <h1 class="header">Header 2</h1> 
    </div> 
</div> 

款式只是頭2我會做這個：

.container .container .header { 
    styles here will only apply to header 2, not header 1 
}