Применить полоса зебры к jQueryUI accordion

Question

У меня есть приложение asp.net mvc, создающее гармошку на основе плагина Accordion jQueryUI. Я бы хотел применить полоса зебры.

Вот цикл конструктор:

<div id="accordion">  
    <% 
     foreach (var webinar in Model as IList<Webinar>) 
     { %> 
     <div id="accordionItem">//toDo: Programmically pick odd/even rows 
     <div class="accStripe"> //insert a div for even rows 
      <h3><a href="#"><b><%= myObj.Title%></h3> 
      <div id="descContent"> 
       <a href="Details/<% =myObj.ID %>"><%= myObj.Desc%> ...more</a> 
      </div> 
     </div>  
     </div> 
    <% } %> 
</div> 

Тогда правило accStripe:

.accStripe{ 
    background:#F7EEDC none repeat scroll 0 0; 
    border-bottom:1px dotted #DFAC45; 
} 

Я могу пикап пунктирная граница, но не цвет фона. Я предполагаю, что это связано с большей спецификой со стороны .ui-accordion-header? Насколько глубоко я должен копать, чтобы понять, как это переопределить?

Answer 1

Richard D. Стоит на Jquery-интерфейсе дает ответ:

Вашей обертка элемент (.accStripe) содержит два ребенка, .ui-гармошку-заголовок и .ui-гармошку, каждый из которых имеет опыт:

.accStripe { background:#F7EEDC none repeat scroll 0 0; border-bottom:1px dotted #DFAC45; } 
.accStripe .ui-accordion-header { background:#F7EEDC none repeat scroll 0 0; } 
.accStripe .ui-accordion-content { background:#F7EEDC none repeat scroll 0 0; }