Question

我有一个标准的嵌套JQuery UI Accordion。我的问题是，我希望将内部手风琴的风格与母手风琴不同。我知道什么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-state-default状态，您还可以将其简化为：

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

这基本上是说“只有将这些样式应用于.ui-accordian-header，如果它是.ui-手风琴的后代，它也是.ui-accordion元素的后代。”

另一种可视化的简单方法可能是这样的：

这是一个带有标题的容器，位于另一个带标题的容器中：

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

样式Jquery嵌套手风琴与父母不同

1 个答案: