jQueryUI自動完成：如何在＃ui-active-menuitem中使用'first-of-type'和'last-of-type'？

Question

我如何設計創建的第一個和最後一個懸停li項目？在CSS代碼中，它只顯示＃ui-active-menuitem，這意味着只有一個規則來設置懸停樣式。這對我的設計不利，因爲我使用了圓角，而且我希望第一個li懸停也是圓角頂部，而最後一個懸停的圓角有圓角。

唯一的規則的CSS顯示的是：

#ui-active-menuitem{ 
    background-color: #CCC 
    color: #F0F0F0; 
    z-index:-5; 
} 

我一直在尋找在jQueryUI的自動完成功能的代碼，我發現，它僅實現懸停的一個案例：

this.active = a.eq(0).children("a").addClass("ui-state-hover").attr("id", "ui-active-menuitem").end(); 

現在，因爲我只能使用一個通用類來懸停li物品，看起來像這樣，沒有圓角的懸停在3px底部圓角上看起來很奇怪： http://i.stack.imgur.com/2EgsK.jpg

我在CSS的靜態html頁面中分別製作了自己的實現，我使用first和type以及last-of-type來使頂部和底部的圓角四捨五入，這看起來像這樣： http://i.stack.imgur.com/bk6RA.jpg

如何使用jQuery UI自動完成功能在＃ui-active-menuitem上應用/實施第一種類型和最後一種類型？

謝謝你們！

Answer 1

錨標記獲得.ui-state-hover和id="ui-active-menuitem"但也有包含<li>和<ul>要考慮。該結構是這樣的（只有相關的細節包括）：

<ul class="ui-autocomplete"> 
    <li class="ui-menu-item"> 
     <a>...</a> 
    </li> 
    <li class="ui-menu-item"> 
     <a>...</a> 
    </li> 
    <li class="ui-menu-item"> 
     <a class="ui-state-hover" id="ui-active-menuitem">...</a> 
    </li> 
</ul> 

所以，你可以做這樣的事情在你的CSS：

ul.ui-autocomplete li.ui-menu-item:first-child a#ui-active-menuitem { 
    border-radius: 3px 3px 0 0; 
} 

ul.ui-autocomplete li.ui-menu-item:last-child a#ui-active-menuitem { 
    border-radius: 0 0 3px 3px; 
} 

，僅調整第一個或最後一個活動的角落項目在自動完成列表中。