特定示例中的CSS层次结构

我正在为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全局的声明）：

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

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

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

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

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

---

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

 #main .mod_sjqmenu ul{}

---

覆盖css。

谢谢！太明显了！重要的是，我自己还是不明白。感谢您的回复。不幸的是，它并没有解决模板独立性的问题——我想从模块css中重置UL css属性，而不依赖于不可预知的选择器，如#main。当做

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

 #main .mod_sjqmenu ul{}