Question

我正在使用jquery手风琴如下：

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

<script type="text/javascript">
    $(document).ready(function () { 
     $("#accordion").accordion();
    }
</script>

<style>
.ui-accordion-content{
        margin:0;
        padding:0;
}
</style>

JQuery创建一个div.ui-accordion-content并将jquery-ui.css的样式应用到它。不幸的是，我没有应用样式标签中的css。

为什么？

Answer 1

正确的方法

您需要了解CSS优先级，然后阅读http://www.vanseodesign.com/css/css-specificity-inheritance-cascaade/。

使用此代码将更新为以下内容：

.ui-accordion .ui-accordion-content{
    margin: 0;
    padding: 0;
}

由于它的定义与链接的jquery ui css中的定义完全相同，因此在DOM之后它将具有优先权。

快速而肮脏的修复

通过将!important添加到您自己的风格中进行修复：

.ui-accordion-content{
    margin:0 !important;
    padding:0 !important;
}

Answer 2

一种选择是使用!important：

.ui-accordion-content {
    margin: 0 !important;
    padding: 0 !important;
}

Answer 3

下载jquery-ui.css，更改其中的相关样式规则并使用该规则而不是公共版本。

OR

在css规则之后尝试使用！important，例如：

余量：0重要;

在Jquery添加一个类之后如何应用css？

3 个答案: