0

我有一个标准的嵌套 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>
4

1 回答 1

0

对我来说，看起来你需要这样做：

.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-accordion 的后代同时也是 .ui-accordion 元素的后代时，才将这些样式应用于 .ui-accordian-header。”

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

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

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

要设置Header 2的样式，我会这样做：

.container .container .header {
    styles here will only apply to header 2, not header 1
}
于 2013-02-02T05:57:37.853 回答