第一个父级ul和第一个li不能正常工作

Question

选择第一个时,我有一个问题,ul和它的第一个li,但它会影响第一li第二的ul>li了.

我的尝试:

#main-nav ul:first-child li:first-child{
    border-radius:5px 0px 5px 0px;
}

相应的html:

<nav id="main-nav">
    <ul>
     <li><a href="#">Home</a></li>
     <li><a href="#">Blog</a></li>
         <li><a href="#">Photos</a>
           <ul>
             <li><a href="#">Gallery 1</a></li>
             <li><a href="#">Gallery 2</a></li>
           </ul>
         </li>
     <li><a href="#">About</a></li>
     <li><a href="#">Contacts</a></li>
    </ul>
  <div style="clear:both;"></div>
</nav>

Answer 1

我想你所追求的是:

#main-nav ul:first-child > li:first-child {
   border-radius:5px 0px 5px 0px;
}

这将仅选择第一个li中的第一个ul作为仅选择其>前面元素的子元素.

正如Paulie_D所暗示的那样,#main-nav > ul > li:first-child只要有一个孩子ul,就会更简洁,也会有效#main-nav.