仅将 CSS 样式应用于<li>嵌套列表根目录中的第一个样式

Question

我只想先应用 CSS，但:first-child应用于每个 ul 的所有第一个子级

这是我的代码

#menu-navigation li:first-child{
   color:red;
}​

当应用于此 HTML 时：

<ul class="nav" id="menu-navigation">
    <li>Home</li>
    <li>About Us
        <ul>
            <li>Our Team</li>
        </ul>
    </li>
</ul>​

。"家"和"我们的团队"都变成红色。

Answer 1

使用子选择器：

#menu-navigation>li:first-child{
   color:red;
}​

例如：http://jsfiddle.net/w47LD/3/

Answer 2

只使用 id/class 不是更容易吗？

<li class="red"> Our Team </li>
.red
{
  color: red;
}

Alternatively you could use an ID...

<li id="red"> Our Team </li>
#red
{
  color: red;
}