Question

我正在尝试将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>

Answer 1

为什么“#locationMenu li”会阻止#locationMenuTopItem块？

更多specific

#locationMenu > li:first-child

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

Answer 2

这可能是一个可能的答案：

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

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

这是过度的，因为#locationMenu li比#locationMenuTopItem更深。连续的陈述越多，它就越深。

Answer 3

由于CSS specificity - 选择器#locationMenu li比#locationMenuTopItem更具有特定。使用#locationMenu #locationMenuTopItem将在此处运行。

以下是Andy Clarke的图表指南：http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html

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

3 个答案: