CSS Hierarchy在一个具体的例子中

Question

我正在为 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;
}

出于某种原因，我的模块声明不会覆盖边距和填充属性(其他属性也是如此)。我很困惑——为什么？在我看来，thay 应该控制 #main ul 并将 margin 和 padding 设置为 0，因为它们在层次结构中更深并且更接近 DOM 对象。

我错过了什么或我的错误在哪里？

Answer 1

它们可能在层次结构中显得更深，但#main ul 使用一个 id，这是首选。您只使用一个低于 id 的类。你可以写

 #main .mod_sjqmenu ul{}

覆盖CSS。