2

我正在使用 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 没有被应用。

为什么？

4

3 回答 3

2

正确的做法

您需要了解 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;
}
于 2012-09-05T13:50:31.360 回答
1

一种选择是使用!important：

.ui-accordion-content {
    margin: 0 !important;
    padding: 0 !important;
}
于 2012-09-05T13:50:13.537 回答
0

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

或者

尝试在您的 CSS 规则之后使用 !important，例如：

边距：0！重要；

于 2012-09-05T13:50:08.830 回答