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

Question

我想首先应用CSS但:first-child适用于每个ul的所有第一个孩子

这是我的CODE

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