html - 仅将 CSS 样式应用于第一个在嵌套列表的根

Question

我只想先应用 CSS li 但: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;
}