Question

我正在尝试使用Pseudo-classes并尝试使用样式类通常做的事情。我有一个带有多个子无序列表的无序列表，依此类推。

我想确保将第一级 li 标记设置为向左浮动。这是我的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>

我试过这样的风格。

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;
}

这个问题是，它说id导航的所有li后代都设置为向左浮动。现在我只希望第一级li标签向左浮动，所有其他级别li标签都要忽略。请不要回答说使用所有顶级li标签的类名。我已经意识到我可以像这样接近它。我要学习的是学习一些伪类，以及它们如何帮助我实现这种方法。

例如我需要的东西就像#nav li：first-child {....}但这只会给我顶部ul列表中的第一个li。我想要ul列表中的所有顶级子级，并忽略第二级 li 标记，依此类推。是否存在可以实现此目的的伪类。

由于

Answer 1

您可以使用#nav > li匹配li的直接#nav子项的所有元素。

更多信息here和here。

演示：http://jsfiddle.net/9M6p2/

Answer 2

一个好的方法是：

#nav li { float: left; }
#nav li li { float: none; }

Answer 3

您可以像使用#nav li一样使用#nav li ul或#nav li ul li来设置第二级LI-Elements的样式。

li列表的伪类

3 个答案: