CSS rule to style first list item
I'm attempting to get a CSS style to apply to the top list item but can't get the rules to apply in the desired fashion. In the example below I'm trying to remove the top border for the very first li item. It works if I put style="border-top: none;" inline on the locationMenuTopItem element but I need to do it with a style block.
Why is the #locationMenu li block overruling the #locationMenuTopItem block?
<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>
Why is the "#locationMenu li" block overruling the #locationMenuTopItem block?
It is more specific
#locationMenu > li:first-child
should do the job without having to add additional ids. (Although not in IE6)
This could be a possible answer:
#locationMenu li,
#locationMenu li:first-child ul li
{
border-top: 1px solid #e1e1e1;
}
#locationMenu li:first-child
{
border-top:none;
}
It is overrulie, because the #locationMenu li is deeper than #locationMenuTopItem alone. The more statements in a row, the deeper it is.
Because of CSS specificity - the selector #locationMenu li is more specific than #locationMenuTopItem. Using #locationMenu #locationMenuTopItem will work here.
Here's a graphical guide from Andy Clarke that will help: http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html
加载中,请稍侯......
精彩评论