選擇嵌套元素的第一個子項時遇到問題

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

如果您正在使用jQuery只需使用

"li.subnav:first" 

，那麼你可以先用subnav：

$("li.subnav:first") 

希望這有助於。