CSS规则来设置第一个列表项的样式

我正在尝试将CSS样式应用于顶部列表项,但无法以所需方式应用规则.在下面的示例中,我正在尝试删除第一个li项目的顶部边框.如果我把style =“border-top：none;”内联于locationMenutopItem元素,但我需要使用样式块.

为什么#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>

解决方法

由于 CSS specificity – 选择器#locationMenu li比#locationMenutopItem更具体.使用#locationMenu #locationMenutopItem将在这里工作.

这是Andy Clarke的图形指南,它将提供帮助：http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html

CSS规则来设置第一个列表项的样式

解决方法

相关文章