只選擇某一類的最後一個孩子在父母

方面我有一些標記，像這樣：只選擇某一類的最後一個孩子在父母

<li> 
    <span> 
    <div> 
     <a href="#" class="anchor menu-active">Afghanistan</a> 
     <div class="container menu-visible"></div> 
    </div> 
    </span> 
    <span> 
     <div> 
     <a href="#" class="anchor">Kabul(AFT)</a> 
     <div></div> 
     </div> 
    </span> 
</li>

我希望在li而言，選擇與類anchor的最後一個元素。結果是應該選擇<a href="#" class="anchor">Kabul(AFT)</a>。 li內的anchor類可以有任意數量的元素。

我想出了這個選擇器：li .anchor:last-of-type，但它選擇了那裏的兩個元素。

如何選擇anchor類的絕對最後一個元素？

來源

2012-05-09 F21

您不能使用CSS選擇具有某個類的DOM中絕對最後一個元素。將來你可以選擇最後一個具有某個類的孩子，但不能選擇最後一個元素，而不考慮結構。 – BoltClock

我結束了使用JavaScript來解決該問題作爲裙用乾淨的CSS選擇器基礎的解決方案是不可能的。

最初，該計劃是抓住最後的.anchor並得到它的x和y座標來計算覆蓋圖的一組座標。

解決的辦法是獲得父母的座標li，得到它的高度，然後進行計算。

不像CSS選擇器一樣整齊，但它的工作原理。

來源

2012-05-09 06:45:40 F21

我沒有看到您列出的項目，似乎你把所有的項目放在同一個李。

你爲什麼不使一個子列表：

<li> 
    <a href="#">Afghanistan</a> 
    <ul> 
    <li> 
     <a href="#">Kaboul(AFT)</a> 
    </li> 
    </ul> 
</li>

如果您想獲得最後一個選擇，那麼你使用最後一子。如果你想與特定的類來獲得最後一個元素，然後

.anchor：{}類型最後的-

是正確的選擇。

There is this post too.

來源

2012-05-09 04:08:37

不幸的是，我無法修改由後端和其他庫生成的標記。我的問題裏的'li'實際上是在'ul'內，但是當我使用YUI時，我從問題中的標記中運行這個選擇。 – F21

問題是，需要與.anchor類區分的選擇器與其他選擇器分開，因此瀏覽器將讀取每個項目作爲最後一個項目，如[jsfiddle示例]中所示（http://jsfiddle.net/8XewF /）。你真的不能超越模板？ –

不，'：last-of-type'選擇它的類型的最後一個元素，而不是它的類。 – BoltClock

只選擇某一類的最後一個孩子在父母

回答

相關問題