logo标签列表

用CSS规则为第一个列表项添加样式

css
5
我试图让CSS样式应用于顶部列表项，但无法以期望的方式应用规则。在下面的示例中，我试图删除第一个li项目的顶部边框。如果我在locationMenuTopItem元素上内联放置style="border-top: none;"，它会起作用，但我需要使用样式块来完成它。
为什么#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>
3个回答
14

为什么 "#locationMenu li" 块会覆盖 #locationMenuTopItem 块？

这是因为它更具特定性。

#locationMenu > li:first-child

应该可以完成工作，而无需添加额外的 id。（虽然在 IE6 中可能不行）

5
这可能是一个可能的答案：
#locationMenu li,
#locationMenu li:first-child ul li
{
    border-top: 1px solid #e1e1e1;    
}

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

这是因为#locationMenu li比#locationMenuTopItem更深。语句越多，它就越深。

1
谢谢提供链接，我明白了。在提问之前我确实阅读了W3C的链接，但当时已经太晚了，无法理解。 - sipsorcery
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接