bootstrap-multiselect.js中的下拉菜单类干扰了我的自定义下拉菜单类

Question

下面的css来自我的custom.css文件，构建在核心引导css之上，并具有class下拉菜单。这个类与davidstutz/bootstrap-multiselect.js文件中的下拉菜单类冲突，该文件也使用核心bootstrap css下拉菜单类。

是否有一种方法可以使custom.css下拉菜单类更具选择性，而不影响引导多选元素而不使用id?我不能使用id，因为我在同一个页面上有多个下拉菜单。

custom.css中有干扰的部分:

.dropdown-menu {
    background-color: #EEEEEE;
    border: 1px solid #D6D6D6;
    border-top-color: #EEEEEE;
    border-radius: 0px;
    -webkit-box-shadow: none;
    box-shadow: none;
}
.dropdown-menu > li > a {
    color: #515151;
    padding: 10px 20px;
    font-size: 12px;
}
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
    color: #FFF;
    background-color: #515151;
}

davidstutz/boot -multiselect - bootstrap-multiselect.js:

templates: {              
            button: '<button type="button" class="multiselect dropdown-toggle" data-toggle="dropdown"></button>',
                ul: '<ul class="multiselect-container dropdown-menu"></ul>',                
            filter: '<li class="multiselect-item filter"><div class="input-group"><span class="input-group-addon"><i class="glyphicon glyphicon-search"></i></span><input class="form-control multiselect-search" type="text"></div></li>',                
                li: '<li><a href="javascript:void(0);"><label></label></a></li>',                
            divider: '<li class="multiselect-item divider"></li>',                
            liGroup: '<li class="multiselect-item group"><label class="multiselect-group"></label></li>'            
        } 

下拉菜单html:

<ul class="dropdown-menu">
    <li><a href="../about-us.html">About Us</a></li>
    <li><a href="../blog.html">Blog</a></li>
    <li><a href="../blog-timeline.html">Blog Timeline</a></li>
</ul>

多选html:

<select class="multiselect" multiple="multiple">
    <option value="cheese">Cheese</option>
    <option value="tomatoes">Tomatoes</option>
    <option value="mozarella">Mozzarella</option>
</select>   

Answer 1

你的bootstrap-multiselect.css不显示。multiselect类给选择标签?