我正在尝试将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>
Que*_*tin 13
为什么"#locationMenu li"会阻止#locationMenuTopItem块？
它更具体
#locationMenu > li:first-child
应该做的工作,而不必添加额外的ID.(虽然不在IE6中)
这可能是一个可能的答案:
#locationMenu li,
#locationMenu li:first-child ul li
{
border-top: 1px solid #e1e1e1;
}
#locationMenu li:first-child
{
border-top:none;
}
它是超支的,因为#locationMenu li比#locationMenuTopItem更深.连续的语句越多,它就越深.
由于CSS的特殊性- 选择器#locationMenu li比. 使用将在这里工作。#locationMenuTopItem#locationMenu #locationMenuTopItem
这是 Andy Clarke 提供的图形指南，可以提供帮助：http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html