我怎么能覆盖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用户界面的这种风格

回答

相关问题