Question

我正在尝试使用“subnav”类选择第一个订单项（<li>）。

我似乎无法得到它：

HTML：

<nav>
<ul class="navigation">

 <li class="logo"><ul>
    <li><a href="index.htm"><img src="images/rh_logo_v5.png" alt="roundhaus logo"/></a></li>
</ul></li>
<li class="subnav"><ul>
    <li><a href="index.htm">home</a></li>
   </ul></li>
<li class="subnav"><ul>
    <li><a href="reclaimedwood.htm">reclaimed wood</a></li>
       <li><a href="design.htm">design</a></li>
   </ul></li>
  <li class="subnav"><ul>
    <li><a href="flooring.htm">flooring</a></li>
    <li><a href="paneling.htm">paneling</a></li>
    <li><a href="beams.htm">beams</a></li>
</ul></li>
<li class="subnav"><ul>
    <li><a href="shelving.htm">shelving</a>
    </li><li><a href="mantels.htm">mantels</a></li>
</ul></li>
<li class="subnav"><ul>
    <li><a href="news.htm">news</a></li>
</ul></li>
<li class="subnav"><ul>
    <li><a href="woodtypes.htm">wood types</a></li>
    <li><a href="phrases.htm">phrases</a></li>
</ul></li>

</ul>
</nav>

CSS选择器对于具有“subnav”类的订单项的第一个实例是什么？

Answer 1

如果第一个.subnav项目在单个.logo项目后面开始，您可以使用

li.logo:first-child + li.subnav

请注意，标记中的:first-child实际上是.logo，而不是.subnav个项目之一。如果您尝试使用li.subnav:first-child，那就是它无效的原因。

Answer 2

只需使用

"li.subnav:first"

如果您正在使用jQuery，那么您可以获得第一个subnav：

$("li.subnav:first")

希望这有帮助。

无法选择嵌套元素的第一个子元素

2 个答案: