具體示例中的CSS層次結構

我正在爲Joomla編寫簡單的菜單模塊！在這一點上，我正在研究核心css結構 - 讓我們假設無法使用的模板 - 這將重置最重要的全局css聲明。我有以下的HTML結構的問題瓦特CSS層次：具體示例中的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文件（indepentent從模塊）：

/* 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進行判斷，並將邊距和填充設置爲0，因爲它們在層次結構中更深並且更接近DOM對象。

我錯過了什麼或者我的錯誤在哪裏？

來源

2012-07-09 PiWo

我「認爲」它在規則被加載順序，但您可以通過使用覆蓋，如果你想

所以例如 `列表樣式位置重要：！外面很重要;

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

來源

2012-07-09 10:34:37

謝謝！如此明顯 - 重要 - 依然不能自行解決。問候 – PiWo 2012-07-10 06:47:18

你能把它標記爲正確和有用的答案嗎？ – 2012-07-10 07:51:36

好的，新的張貼在這裏。完成！ – PiWo 2012-07-10 09:15:43

它們可能在層次結構中看起來更深，但#main ul使用一個id，這是首選。你只使用一個比id低的類。你可以寫

#main .mod_sjqmenu ul{}

覆蓋css。

來源

2012-07-09 10:43:15 32bitfloat

感謝您的回覆。不幸的是，它並沒有解決模板獨立性的問題 - 我想從模塊css中重置UL css屬性，而不依賴像#main這樣的不可預測的選擇器。問候 – PiWo 2012-07-10 06:50:19

具體示例中的CSS層次結構

回答

相關問題