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，就会有效。

Answer 2

你可以尝试

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

请参阅此link

第一个父亲ul和第一个李没有正常工作

2 个答案: