0

Joomlaの簡単なメニューモジュールを書いています！そしてこの時点で、最も重要なグローバル css 宣言をリセットするコア css 構造 (アタプタブル テンプレートとしましょう) に取り組んでいます。次の HTML 構造の CSS 階層に問題があります。

<div id="main" role="main">
<div id="top">
    <div class="menu">
        <ul class="main-level">
            <li class="main-level">
                <a class="main-level" href="/joomla17/index.php/using-joomla">Using Joomla!</a>
                    <ul class="sub-level">
                        <li class="sub-level">
                            Menu Item
                        </li>
                    </ul>
            </li>
        </ul>
    </div>
</div>

CSS ファイル:

メイン レイアウト css ファイル (モジュールから独立):

/* PART OF MAIN LAYOUT FILE */          
    #main ul {    
list-style-position: outside;
        list-style-type: square;
        margin: 10px 0;
        padding: 0 0 0 15px;
    }

モジュール css ファイル (css グローバルをリセットする宣言):

    /* MY MODULE CLASSES */
.mod_sjqmenu ul.sub-level {
    border: 1px solid #666666;
    display: block;
    margin: 0;
    padding: 0;
    position: absolute;
    text-align: left;
    width: 100%;
}

.mod_sjqmenu ul {
    cursor: pointer;
    list-style: none outside none;
    margin: 0;
    padding: 0;
    position: relative;
    z-index: 9999;
}

何らかの理由で、私のモジュール宣言は、margin および padding 属性 (その他も同様) を上書きしません。私は混乱しています - なぜですか？私の意見では、#main ul を支配し、margin と padding を 0 に設定する必要があります。これらは階層が深く、DOM オブジェクトに近いからです。

何が欠けているか、どこにエラーがありますか?

4

2 に答える 2

1

それらは階層のより深いところに表示される可能性がありますが、＃mainulはIDを使用します。これが推奨されます。idよりも低いクラスのみを使用します。あなたは書くことができます

 #main .mod_sjqmenu ul{}

cssをオーバーライドします。

于 2012-07-09T10:43:15.133 に答える
0

ルールがロードされる順序だと「思います」が、必要に応じて !important を使用してオーバーライドできます

たとえば、`list-style-position: outside !important;

    list-style-type: square !important;
    margin: 10px 0 !important;
    padding: 0 0 0 15px !important;
}`
于 2012-07-09T10:34:37.563 に答える