我怎麼能覆蓋jQuery用戶界面的這種風格

我試圖覆蓋jQuery UI的一些元素的樣式，這是我的HTML我怎麼能覆蓋jQuery用戶界面的這種風格

<div class="menu ui-accordion-header ui-state-default ui-corner-all"> 
     <label class="formatText" id="lblIndicators"> 
      Cliente</label> 
     <span class="ui-icon ui-icon-triangle-1-e menuIcon" style="float: right"></span> 
     <div class="subMenu ui-accordion-header ui-helper-reset ui-state-default ui-corner-all"> 
      <ul class="options"> 
       <li> 
        <label class="formatText"> 
         Ver Cliente</label> 
        <span class="ui-icon ui-icon-triangle-1-s" style="float: right"></span> 
        <div class="subMenuRight ui-accordion-header ui-helper-reset ui-state-default ui-corner-all"> 
         <ul class="options"> 
          <li>Por Nombre</li> 
          <li>Por Año de ingreso</li> 
         </ul> 
        </div> 
       </li> 
       <li>algo</li> 
       <li>cualquier vaina</li> 
      </ul> 
     </div> 
    </div>

注該div有後續類menu ui-accordion-header ui-state-default ui-corner-all現在我試圖覆蓋這樣的類

.menu .ui-state-default 
{ 
    width:120px; 
    color: #FFFFFF; 
    background: #003E6F; 
    float:left; 
} 

.menu .ui-helper-reset 
{ 
    width:120px; 
    color: #FFFFFF; 
    background: #003E6F; 
    float:left; 
} 

.menu .ui-accordion-header 
{ 
    width:120px; 
    color: #FFFFFF; 
    background: #003E6F; 
    float:left; 
} 

.menu .ui-state-hover{ 
    border-width: 0; 
    font-size: 12px; 
    color: #003E6F; 

} 

.subMenu 
{ 
    display:none; 
    width:129px; 
} 

.subMenuRight 
{ 
    display:none; 
    width:120px; 
    position:absolute; 
    left:100%; 
    top:0px; 
}

現在我的問題是，第一個元素div，沒有得到類的覆蓋。所有的孩子們都很好。我在做什麼錯了？

This is my live demo

來源

2011-08-11 Luis

爲什麼不編輯jQuery UI帶來的原始CSS文件，或者製作自己的主題？ –

感謝提問，但它不是一種選擇，因爲我使用了jquery-ui和其他人的風格的一些元素，基於jquery-ui的某些部分 – Luis

關於你的第CSS聲明，請嘗試使用這個：

.menu.ui-state-default, .menu .ui-state-default 
{ 
    width:120px; 
    color: #FFFFFF; 
    background: #003E6F; 
    float:left; 
}

在你的代碼，.menu .ui-state-default並不適用於最外層的DIV（<div class="menu ui-accordion-header ui-state-default ui-corner-all">），因爲該代碼與內部類的ui-state-default定位元素元素類型爲menu。

第一個div有兩個類，因此您還需要使用此.menu.ui-state-default將樣式應用於該div。

來源

2011-08-11 21:38:07 Leah

您的JavaScript沒有做任何事情來改變DIV類。主div具有類菜單，並且綁定到其事件的函數可以找到其中的跨度並更改其類。

來源

2011-08-11 19:42:22 yoozer8

從理論上講，只要你在jQuery UI風格的任何地方連接你的自定義樣式，就應該能夠將它放入樣式表並使其工作。

來源

2011-08-11 19:46:59

我怎麼能覆蓋jQuery用戶界面的這種風格

回答

相關問題