Pseudo-classes for li list
I'm experimenting here with Pseudo-classes and trying to something I would usually do with a style class开发者_开发百科. I have a unordered list with multiple sub unordered lists and so on.
I want to only make sure the first level of li tags are been set to float left. Here is my html
<body>
<div id="MainMenu">
<ul id="nav">
<li><a href="#">Home</a></li>
<li>
<a href="#">About</a>
<ul>
<li><a href="#">The Product</a></li>
<li><a href="#">Meet The Team</a></li>
</ul>
</li>
<li>
<a href="#">Contact</a>
<ul>
<li>
<a href="#">Business Hours</a>
<ul>
<li><a href="#">Week Days</a></li>
<li><a href="#">Weekends</a></li>
</ul>
</li>
<li><a href="#">Directions</a></li>
</ul>
</li>
</ul>
</div>
</body>
I tried a style like this.
body {
font: 13px/160% Trebuchet MS,Arial,Helvetica,Sans-Serif;
margin:0;
padding:0
}
#nav{
list-style:none;
font-weight:bold;
width:100%;
}
#nav li{
float:left;
margin-right:40px;
position:relative;
}
The issue with this is, its saying all li descendants of id nav get set to float left. Now I only want the first level li tags to float to left and all the other level li tags to be ignored. Please don't answer by saying use a class name for all the top level li tags. I already am aware I could approach it like this. What I'm after is to learn some of the Pseudo-classes and how they may help me in this approach.
For example I need something that is like #nav li:first-child{ .... } But this is only going to give me the first li in the top ul list. I want all the top level children of the ul list and ignore the second level li tags and so on. Is there a Pseudo-classes that can accomplish this.
Thanks
you can use #nav > li this matches all elements that are the immediate li children of #nav.
More info here and here.
A demo: http://jsfiddle.net/9M6p2/
A good approach would be:
#nav li { float: left; }
#nav li li { float: none; }
You could use #nav li like you already do and #nav li ul or #nav li ul li to style the second level LI-Elements.
加载中,请稍侯......
精彩评论