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

How to apply css, after Jquery adds a class?

本文关键字：何应用 应用 css 添加 一个 Jquery 之后      更新时间：2023-09-26

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

为什么？

正确的方法

你需要了解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;
}

一个选项是使用!important:

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

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

或

尝试使用！在css规则之后很重要，比如：

边距：0！重要的

相关文章：