CSS規則樣式第一個列表項

我試圖獲得一個CSS樣式應用於頂部列表項，但無法獲得規則以所需的方式應用。在下面的例子中，我試圖刪除第一個li項目的頂部邊框。如果我在locationMenuTopItem元素上嵌入style="border-top: none;"，但它需要使用樣式塊來完成。CSS規則樣式第一個列表項

爲什麼#locationMenu li塊取代#locationMenuTopItem塊？

<html> 
<head> 
<style> 
#locationMenu li { 
    border-top: 1px solid #e1e1e1;  
} 

#locationMenuTopItem { 
    border-top: none; 
} 
</style> 
</head> 
<body> 
<ul id="locationMenu"> 
    <li id="locationMenuTopItem"><a href="#">Top Menu</a> 
     <ul> 
      <li><a href="#">Sub Menu 1</a></li> 
      <li><a href="#">Sub Menu 2</a></li> 
      <li><a href="#">Sub Menu 3</a></li> 
     </ul> 
    </li> 
    <li><a href="#">Top Menu 2</a></li> 
    <li><a href="#">Top Menu 3</a></li> 
    </ul> 
</body>

來源

2011-02-12 sipwiz

由於CSS specificity的 - 選擇#locationMenu li更具體比#locationMenuTopItem。使用#locationMenu #locationMenuTopItem將在這裏工作。

下面是Andy Clarke的圖形指南，這將有助於：http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html

來源

2011-02-12 11:12:39

Thx爲鏈接。這清除了它。在提問之前，我確實閱讀了W3C鏈接，但解密它的時間太晚了。 – sipwiz 2011-02-12 11:24:35

爲什麼「#locationMenu禮」塊否決#locationMenuTopItem塊？

更specific

#locationMenu > li:first-child

應該做的工作，而無需添加額外的ID。（雖然不是在IE6）

來源

2011-02-12 11:14:02 Quentin

這可能是一個可能的答案：

#locationMenu li, 
#locationMenu li:first-child ul li 
{ 
    border-top: 1px solid #e1e1e1;  
} 

#locationMenu li:first-child 
{ 
    border-top:none; 
}

這是overrulie，因爲#locationMenu李比單獨#locationMenuTopItem更深。連續越多，越深入。

來源

2011-02-12 11:18:18 Marnix

CSS規則樣式第一個列表項

回答

相關問題