CSS层次结构在一个特定的例子中

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;
}

出于某种原因，我的模块声明不会覆盖margin和padding属性（其他也一样）。我很困惑——为什么？在我看来，他们应该控制#main-ul，并将margin和padding设置为0，因为它们在层次结构中更深，更接近DOM对象。

我遗漏了什么，或者我的错误在哪里？

Answer 1

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

 #main .mod_sjqmenu ul{}

以覆盖css。

Answer 2

我"认为"这是加载规则的顺序，但您可以使用重写！重要的是如果你想要

例如`列表样式位置：外部！重要的

    list-style-type: square !important;
    margin: 10px 0 !important;
    padding: 0 0 0 15px !important;
}`