Question

我正在尝试覆盖jquery ui的某些元素的样式，这是我的html

    <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

Answer 1

对于您的第一个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 1}}。

第一个div有两个类，因此您还需要使用此.menu.ui-state-default将样式应用于该div。

Answer 2

你的javascript没有做任何改变div类的事情。主div有类菜单，你绑定到它的事件的函数找到它内部的跨度并改变它们的类。

Answer 3

理论上，只要您在jQuery UI样式的任何位置链接自定义样式，就应该能够将其放入样式表并使其工作。

我怎么能覆盖这种风格的jquery ui

3 个答案: