0

我正在为 Joomla 编写简单的菜单模块！在这一点上，我正在研究一个核心 css 结构 - 比如说 ataptable 模板 - 这将重置最重要的全局 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;
}

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

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

4

2 回答 2

1

它们可能在层次结构中显得更深，但 #main ul 使用 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 回答