2012-03-25 31 views
1

我試圖選擇類「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」行項目的第一個實例?

+1

'li'代表*列表*項目,而非*行*項目:) – BoltClock 2012-03-25 14:47:13

+0

您想要選擇

  • home
  • ? – 2012-03-25 15:08:12

    回答

    1

    如果第一.subnav項目單.logo項目之後立即開始,你可以使用

    li.logo:first-child + li.subnav 
    

    請注意,在您的標記的:first-child實際上是.logo,而不是.subnav項目之一。如果您嘗試使用li.subnav:first-child,那就是無法使用的原因。

    +0

    謝謝,那已經工作了。作爲一名新手,似乎要記住一個棘手的問題 - 我不確定未來是否可以複製該方法,因爲我沒有先選擇標識的邏輯。當然,必須有辦法根據課堂選擇第一個孩子嗎? – 2012-03-25 14:57:13

    +0

    @Doug Firr:不幸的是CSS沒有提供一個選擇器來匹配第一個孩子和一個類。我提出了一個涉及重寫規則的詳細而多功能的技巧,您可以在[本答案](http://stackoverflow.com/a/8539107/106224)中看到,但是您的結構允許採用更簡單的方法我跟這裏去了。有一個關於在這個答案中允許使用CSS4選擇器的可能性的說明,但是這對於相對遙遠的未來... – BoltClock 2012-03-25 14:59:56

    +0

    所以現在沒有第一個基於類的兒童選擇器 - 感謝信息。你真的幫我選擇了這個選擇器 – 2012-03-25 15:08:21

    0

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

    "li.subnav:first" 
    

    ,那麼你可以先用subnav:

    $("li.subnav:first") 
    

    希望這有助於。

    +0

    你**有**可以使用jQuery或其他一些選擇器庫。 ':first'不是一個CSS選擇器。 – BoltClock 2012-03-25 15:00:20