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

1 つのオプションは、次を使用すること!importantです。

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

jquery-ui.css をダウンロードし、その中の関連するスタイル ルールを変更して、パブリック バージョンの代わりにそれを使用します。

また

次のように、CSS ルールの後に !important を使用してみてください。

margin:0!重要;

于 2012-09-05T13:50:08.830 に答える